Question

我想写一个像这样的自定义元素。

<dom-module id="custom-element">
    <template>

        <!-- This part I want to use document.createElement -->
        <template is="dom-repeat" items="[[data]]">

            <div>
                <span>[[item.name]]</span>
                <span>[[item.count]]</span>
            </div>

        </template>

    </template>
</dom-module>

计数值可能会被其他元素更改。

是否可以将属性count绑定到document.createElement元素？

class CustomElement extend Polymer.Element {

    static get is () { return "custom-element" }

    static get properties () {
        return {
            data: {
                type: Array,
                value: [{
                    "name": "item1",
                    "count": 0
                }, {
                    "name": "item2",
                    "count": 0
                }, {
                    "name": "item3",
                    "count": 0
                }],
                notify: true,
                observer: "_dataChanged"
            }
        }
    }

    _dataChanged: (data) => {
        data.map((item) => {
            let div = document.createElemnt("div")

            let itemName = document.createElement("span")
                itemName.textContent = item.name

            let itemCount = document.createElement("span")

                // I want to bind value count here
                itemCount.textContent = item.count

            div.appendChild(itemName)
            div.appendChild(itemCount)

            this.shadowRoot.appendChild(div)
        })
    }

}

window.customElements.define(CustomElement.is, CustomElement)

当其他元素更改计数值时，由document.createElement计数创建的元素将会更改。

这可能吗？

Answer 1

因此，数据绑定有效，两个自定义元素

是否对绑定使用dom-repeat，或将其绑定到阴影DOM中的输入等元素，

OR，

使用document.createElement将元素附加到shadowDOM，并使用绑定值

没关系

您使用{{}}进行双向绑定，使用[[]]进行单向绑定。

因此，如果other-element更改了绑定到data的{{1}}属性，并且您希望custom-element容纳它们，请使用单向

如果您希望custom-element所做的更改也更改custom-elemnt中的值，请使用双向方式。

如果您使用other-element来改变一个元素的数据，我担心，这些突变不会反映到自定义元素。

但是，如果您在属性console上的custom-element和other-element之间存在约束，并且

data将属性other-element变为事件的结果，然后，这些更改会通知所有通信元素。

修改：我看到您在评论中有后续查询，询问为什么plunk您无效

现在，您正在通过data，

正确绑定元素two-way

聚合物中存在一个错误，如果数据是数组，则数据突变不会data notify。

现在解决方案：在更改后使用切片轻松克隆数据

像这样：

observers

是否可以将属性绑定到document.createElement元素？

1 个答案: