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>
Но это не работает. Любая помощь?
Можете ли вы предоставить воспроизводимый JSBIN для работы? –
В чем заключен контекст вашей. Для вашего файла index.html требуется , если вы хотите привязывать данные в своем файле index.html. –
akc42
@ akc42: он находится в dom-bind –