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

2023年4月22日 241次阅读

是否有可能在自定义元素中修改JS中的本地/轻型DOM,以便为动态添加的元素处理绑定,就像在模板中指定它们一样？

请考虑以下代码段(自定义元素的一部分)：

...
            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创建时不能分配该值,因为在实际情况中它将取决于实时上下文.

最佳答案 现在看来,Polymer 1.0不支持动态(命令性)绑定.
Here和
here是相关的讨论.

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

这是一个示例,其中使用tapCount,tapMessage和method _tapMe属性强制创建domBind.后者用作添加到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();
};
...

然后通过绑定本地定义的externalMethod,可以从“外部”范围“绑定”事物.在这种情况下,_computeValue指的是在自定义元素上定义的方法,其附加的方法中发生了命令性的轻型DOM构造.

点赞