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

Question

是否有可能在自定义元素中从 JS 修改本地/轻型 DOM，以便处理动态添加的元素的绑定(bind)，就好像它们是在 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 似乎不支持动态(命令式)绑定(bind)。 Here和 here是相关的讨论。

来自上述链接的信息表明了一种可靠但有限的方法，通过使用 dom-bind 模板元素来创建带有绑定(bind)的动态内容。该限制是由于绑定(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();
}

发布了一个与我的问题类似的问题 here ，这有助于我更好地了解问题的范围(尤其是引用 Polymer 0.5 injectBoundHTML)。

---

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

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

然后通过绑定(bind)本地定义的 externalMethod 可以从“外部”范围“绑定(bind)”事物。在这种情况下，_computeValue 指的是在自定义元素上定义的方法，其方法 attached 中发生命令式轻型 DOM 构造。