Polymer dom-bind模板中兄弟元素数据绑定失效问题求助

你的问题核心在于没有利用Polymer属性系统的变化通知机制，导致<message-grid>的loading属性变化无法同步到<dom-bind>实例上。下面是具体的解决步骤和原理：

1. 先确保<message-grid>的loading属性支持通知 #

要实现双向绑定，<message-grid>的loading属性必须配置notify: true，这样当属性值变化时，它会向外发送loading-changed事件，让父级（这里是<dom-bind>）感知到变化。在<message-grid>的定义里，属性应该这么写：

static get properties() {
  return {
    loading: {
      type: Boolean,
      value: false,
      notify: true, // 关键配置：开启属性变化通知
      reflectToAttribute: true // 可选：将属性同步到HTML属性上
    }
  };
}

2. 简化<dom-bind>的模板代码 #

不需要额外的初始化脚本，<dom-bind>本身支持双向绑定和计算属性绑定，直接修改模板即可：

<dom-bind id="messageListScreen">
  <template>
    <!-- 用[[!loading]]实现取反的单向绑定：loading为true时active为false -->
    <paper-progress-button 
      on-click="fetchNewMessages" 
      active="[[!loading]]" 
      active-text="Refresh" 
      inactive-text="Refreshing..." 
      raised>
    </paper-progress-button>
    <!-- 用{{loading}}双向绑定：grid的loading变化会同步到dom-bind的loading属性 -->
    <message-grid id="grid" loading="{{loading}}"></message-grid>
  </template>
</dom-bind>

3. 正确挂载fetchNewMessages方法 #

需要把点击事件的处理函数挂载到<dom-bind>的实例上，确保它能访问到模板内的元素和属性：

document.addEventListener("WebComponentsReady", function() {
  const screen = document.getElementById('messageListScreen');
  
  screen.fetchNewMessages = function() {
    // 这里触发加载逻辑，比如直接调用grid的加载方法
    // 只要grid内部会修改loading属性并触发通知，dom-bind的loading就会自动同步
    this.$.grid.triggerLoading(); // 假设这个方法会设置loading为true，加载完成后设为false
  };
});

为什么你的原代码不生效？ #

你之前写的初始化脚本只是一次性赋值了loading的初始值，但没有监听<message-grid>的loading变化事件。而Polymer的双向绑定依赖于notify: true的属性发送变化通知，<dom-bind>会自动监听这些通知并更新自身的属性值，进而同步到绑定的元素上。

内容的提问来源于stack exchange，提问作者Magnus