Polymer dom-bind 模板中兄弟元素之间的数据绑定

Question

我有一个包含两个元素的 <dom-bind> 模板 - 一个是按钮，另一个是列表。当列表正在加载时（它的 loading 属性是 true），按钮 active 属性应该设置为 false，反之亦然.

我无法让它们之间的绑定生效。当然我可以从整个事物中创建一个新元素，但如果可能的话我宁愿避免它。

这是我的 <dom-bind> 模板：

<dom-bind id="messageListScreen">
    <template>
        <paper-progress-button on-click="fetchNewMessages" active="[[!loading]]" active-text="Refresh" inactive-text="Refreshing..." raised></paper-progress-button>
        <message-grid id="grid" loading="{{loading}}"></message-grid>
    </template>
</dom-bind>

使用上面的代码，没有任何反应。如果我这样做

<script>
    document.addEventListener("WebComponentsReady", function(event){
        let self = document.getElementById('messageListScreen');
        self.loading = self.$.grid.loading;
    });
</script>

self.loading确实得到了grid.loading的值，但是当grid.loading的值改变时，self.loading的值保持不变。

有什么方法可以使用 <dom-bind> 将 grid.loading 的值绑定到 <paper-progress-button> 的 active 属性吗？

Answer 1

你应该使用双向绑定。

将 notify:true 添加到 message-grid 中的 loading 属性，并通过 this.set('loading', false)（而不是 this.loading = false 在 message-grid 中设置加载).

您也应该在 messageListScreen 中有一个名为 loading 的属性。你可能有，你不需要它，但它对文档很有帮助。

另一件事是布尔属性如果存在则始终为真，因此无论属性具有什么值（真||假），在这两种情况下加载都将始终为真。将布尔值改为数字 (int)，其中 1 为真，0 为假。

Polymer dom-bind 模板中兄弟元素之间的数据绑定

Data binding between sibling elements in a Polymer dom-bind template

data-binding

binding

polymer

polymer-2.x