polymer - Polymer：将自定义元素的数据绑定到主文档

Question

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

<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>

我希望当用户单击任何对象时，工具栏应该获得名称。为此，我正在使用：

<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>

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

Answer 1

我通过notify='true'像这样放入脚本标签来解决这个问题：

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

通知让数据更改事件反弹到包含我们自定义元素的元素。