Question

是否可以在自定义元素中修改JS中的本地/轻型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和here是相关的讨论。

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

以下是一个示例，其中domBind必须使用属性tapCount，tapMessage和方法_tapMe进行创建。后者用作on-tap事件处理程序，用于添加到domBind元素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，可以＆＃34;绑定＆＃34;来自＆＃34;外部＆＃34;范围。在这种情况下，_computeValue指的是在自定义元素上定义的方法，其方法attached中发生了命令式轻型DOM构造。

可以动态创建Polymer中的Local / Light DOM进行处理以确保正确绑定吗？

1 个答案: