Как я могу передать dom-repeat элемент внутри функции в щелчке? Мой код не работает:
<dom-module id="my-element">
<template>
<template is="dom-repeat" items="{{stuff}}>
<paper-button on-click="_myFunction(item.name)">{{item.name}}</paper-button>
</template>
</template>
</dom-module>
<script>
Polymer({
is: 'my-element',
ready: function() {
this.stuff = [
{ id: 0, name: 'Red' },
{ id: 1, name: 'Blue' },
{ id: 2, name: 'Yellow' },
];
},
_myFunction: function(color) {
console.log('You pressed button ' + color);
},
})
</script>
Или есть лучший подход к достижению чего-то подобного? Спасибо!
Вы не можете передавать аргументы непосредственно методам щелчка, но вы можете получить элемент, нажатый внутри шаблона dom-repeat, через событие:
<script>
Polymer({
is: 'my-element',
ready: function() {
this.stuff = [
{ id: 0, name: 'Red' },
{ id: 1, name: 'Blue' },
{ id: 2, name: 'Yellow' },
];
},
_myFunction: function(e) {
console.log('You pressed button ' + e.model.item.name);
},
});
</script>
См. соответствующую документацию здесь.
Короткий ответ
Элемент находится в параметре события: e.model.item
Из документация:
Когда вы добавляете декларативный обработчик событий внутри шаблон, повторитель добавляет свойство модели к каждому событию, отправленному на слушатель. Модель - это данные области, используемые для создания шаблона экземпляр, поэтому данные элемента - model.item:
<dom-module id="simple-menu">
<template>
<template is="dom-repeat" id="menu" items="{{menuItems}}">
<div>
<span>{{item.name}}</span>
<span>{{item.ordered}}</span>
<button on-click="order">Order</button>
</div>
</template>
</template>
<script>
Polymer({
is: 'simple-menu',
ready: function() {
this.menuItems = [
{ name: "Pizza", ordered: 0 },
{ name: "Pasta", ordered: 0 },
{ name: "Toast", ordered: 0 }
];
},
order: function(e) {
var model = e.model;
model.set('item.ordered', model.item.ordered+1);
}
});
</script>
</dom-module>
Примечание. Свойство модели не добавлено для зарегистрированных прослушивателей событий. (с помощью addEventListener) или слушателей, добавленных к одному из родительские узлы шаблона. В этих случаях вы можете использовать метод modelForElement для извлечения данных модели который породил данный элемент. (Есть также соответствующие itemForElement и indexForElement.)