可以动态地在聚合物中创建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不支持动态(命令式)绑定。这里和这里是相关的讨论。

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

下面是一个示例，其中domBind是命令式地创建的，具有属性tapCount, tapMessage和方法_tapMe。后者用作添加到domBind元素div的on-tap事件处理程序。

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();
}

类似于我的问题张贴在这里，这有助于我更好地了解问题的范围(特别是参考聚合物0.5 injectBoundHTML)。

---

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

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

然后，通过绑定本地定义的externalMethod，可以"绑定"来自"外部"作用域的东西。在这种情况下，_computeValue引用了一个定义在自定义元素上的方法，在它的方法attached中发生了命令式的轻DOM构造。