2015-12-14 3 views
0

У меня есть создать пользовательский элемент для отображения чата следующим образом:Polymer: Bind данные заказной-элементный к основному документу

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

Но это не работает. Любая помощь?

+0

Можете ли вы предоставить воспроизводимый JSBIN для работы? –

+0

В чем заключен контекст вашей . Для вашего файла index.html требуется