Polymer 聚合物：绑定自定义元素'；将数据添加到主文档

我创建了一个自定义元素来显示聊天列表，如下所示：

<dom-module id="contact-element">
  <style>
    --paper-card: {
      width: 100%;
    }
    .edit{
      display: block;
    }
    .last{
      color: #A7A7A7;
      font-size: 14px;
      margin-top: 4px;
    }
  </style>
  <template>
    <template is="dom-repeat" items="{{contacts}}">
      <div>
        <paper-card class="contactcard" on-click="setUser">
          <div class="card-content">
            <div>{{ item.name }}</div>
            <div class="last">{{ item.last }}</div>
          </div>
        </paper-card>
      </div>
    </template>
  </template>
  <script>
    HTMLImports.whenReady(function () {
      Polymer({
        is: 'contact-element',
        properties: {
          user: {
            type: Object,
          },
          username: {
            type: String,
            reflectToAttribute: true,
          }
        },
        ready: function(){
          this.contacts = [
            {name: "Rajat",last: "How are you!", unread: 1},
            {name: "Neeraj",last: "Okay", unread: 0},
            {name: "Vaibhav"},
            {name: "Rohit"},
            {name: "Hitesh"},
          ];
        },
        setUser: function(e){
          var model = e.model;
          this.user = model.get('item');
          this.username = this.user.name;
          console.log("user set: "+model.get('item.name'));
        }
      });
    });
  </script>
</dom-module>

--纸卡：{
宽度：100%；
}
.编辑{
显示：块；
}
.最后{
颜色：#A7A7；
字体大小：14px；
利润上限：4倍；
}
{{item.name}
{{item.last}}
HTMLImports.whenReady（函数（）{
聚合物({
是：'接触元素'，
特性：{
用户：{
类型：对象，
},
用户名：{
类型：字符串，
reflectToAttribute:true，
}
},
就绪：函数（）{
此项。联系人=[
{name:“Rajat”，last:“你好！”，未读：1}，
{name:“Neeraj”，last:“OK”，未读：0}，
{name:“Vaibhav”}，
{name:“Rohit”}，
{name:“Hitesh”}，
];
},
设置用户：函数（e）{
var模型=e.model；
this.user=model.get（'item'）；
this.username=this.user.name；
log（“用户集：+model.get（'item.name'））；
}
});
});

我希望当用户点击任何一个对象时，工具栏应该有名称。为此，我使用：

<paper-toolbar>
                <paper-icon-button icon="menu" paper-drawer-toggle paper-drawer-left></paper-icon-button>
                <span class="flex"></span>

                <!-- Title -->
                <div class="app-name flex">[[ pagetitle ]]</div>

                <paper-icon-button icon="add-alert"></paper-icon-button>
                <paper-icon-button icon="question-answer" paper-drawer-toggle paper-drawer-right></paper-icon-button>
              </paper-toolbar>

[[pagetitle]]

---

但它不起作用。有什么帮助吗？

我通过将

notify='true'

放入脚本标记来解决这个问题，如下所示：

properties: {
          user: {
            type: Object,
            notify: true
          },
          username: {
            type: String,
            reflectToAttribute: true,
          }
        },

---

Notify允许数据更改事件反弹到包含自定义元素的元素。

能否提供可复制的JSBIN来使用？您所在的上下文是什么。如果要在index.html文件中进行数据绑定，index.html文件需要一个数据绑定。@akc42:它在dom bindCheck中检查此问题，可能会有帮助：