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的值保持不变。

有没有办法使用grid.loading将active的值绑定到<paper-progress-button>的{{1}}属性？

Answer 1

你应该使用双向绑定。

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

您也应该在loading中拥有一个名为messageListScreen的媒体资源。你可能有，你不需要它，但它对文档来说很好。

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

Polymer dom-bind模板中

1 个答案: