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

Notify を使用すると、カスタム要素を格納している要素にデータ変更イベントが跳ね返ります。