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

2023-12-08

是否可以修改本地/灯光DOM从自定义元素中的 JS 中处理动态添加的元素的绑定,就好像它们是在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在真实情况下的创建将取决于实时上下文。


目前看来,Polymer 1.0 不支持动态(命令式)绑定。Here and 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.5jectBoundHTML)。


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

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

然后通过绑定本地定义externalMethod人们可以从“外部”范围“绑定”事物。在这种情况下,_computeValue指在自定义元素上定义的方法,并在其方法中进行命令式轻量 DOM 构造attached.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

是否可以处理在 Polymer 中动态创建的 Local/Light DOM 以确保正确的绑定? 的相关文章

随机推荐