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

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>

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

是否可以将属性计数绑定到 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、

或者，

你使用 document.createElement 将一个元素附加到你的影子DOM，带有绑定值，

无所谓

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

因此，如果 other-element 将 data 属性更改为 custom-element，并且您希望 custom-element 容纳它们，请使用一种方式

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

如果您正在使用 console 改变一个元素的数据，恐怕这些改变不会反映到自定义元素中。

但是，如果您在属性 data 和

上的 custom-element 和 other-element 之间有绑定

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

编辑：我看到你在评论中有一个后续查询，问为什么你制作的plunk不起作用

当您现在通过 data 正确绑定元素 two-way 时，

Polymer 中存在一个错误，如果数据是数组，则不会 notify observers 数据突变。

目前的解决方案：更改数据后使用切片浅克隆数据

像这样：

add (e) {
    this.set(`data.${e.target.index}.count`, (this.data[e.target.index].count + 1))

    this.data = this.data.slice();
  }

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

Is it possible to bind properties to a document.createElement element?

javascript

polymer

polymer-2.x