是否可以处理在 Polymer 中动态创建的 Local/Light DOM 以确保正确绑定？

Question

是否可以在自定义元素中从 JS 修改 local/light DOM，以便处理动态添加的元素的绑定，就好像它们是在 template 中指定的一样？

请考虑以下代码片段（自定义元素的一部分）：

...
            attached: function () {
                var node = document.createElement('div');                        
                Polymer.dom(node).innerHTML = '[[_computedValue()]]';
                Polymer.dom(this.$.container).appendChild(node);
                Polymer.dom.flush();
            },

            _computedValue: function() {
                return "some value";
            },
...

我希望添加的 div 的内部 HTML 等于从方法 _computedValue 返回的值。该值不能在 div 创建时分配，因为在实际情况下它将取决于实时上下文。

Answer 1

目前 Polymer 1.0 似乎不支持动态（命令式）绑定。 Here and here是相关的讨论。

来自上述链接的信息表明了一种可靠但有限的方法，该方法通过使用 dom-bind 模板元素来创建具有绑定的动态内容。该限制是由于绑定严格使用本地定义的方法和正在创建的 dom-bind 实例的属性。

这是一个示例，其中 domBind 是使用属性 tapCount、tapMessage 和方法 _tapMe 强制创建的。后者用作添加到 domBind 元素的 on-tap 事件处理程序 div.

attached: function () {
   var domBind = document.createElement('template', 'dom-bind');
   domBind.tapCount = 0;
   domBind.tapMessage = 'Tap me now!';
   domBind._tapMe = function(e) {
                this.tapCount = this.tapCount + 1;
                this.tapMessage = 'Tapped ' + this.tapCount + ' time(s).';
   };
   var div = domBind.content.ownerDocument.createElement('div');
   div.innerHTML = '<b on-tap="_tapMe">[[tapMessage]]</b>';
   domBind.content.appendChild(div);
   Polymer.dom(this.$.container).appendChild(domBind);
   Polymer.dom.flush();
}

发布了一个与我的问题类似的问题 here，这有助于我更好地了解问题的范围（尤其是参考 Polymer 0.5 injectBoundHTML）。

当然，仍然可以访问外部方法和属性：

...
var self = this;
domBind.externalMethod = function() {
    return self._computeValue();
};
...

然后通过绑定本地定义的 externalMethod 可以 "bind" "external" 范围内的东西。在这种情况下，_computeValue 指的是在自定义元素上定义的方法，在其方法 attached.

中发生命令式光 DOM 构造

是否可以处理在 Polymer 中动态创建的 Local/Light DOM 以确保正确绑定？

Can dynamically created Local/Light DOM in Polymer be processed to ensure correct bindings?

javascript

polymer-1.0