Подтвердить что ты не робот

Полимер - Пропускайте dom-повторный элемент внутри функции щелчка

Как я могу передать 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>

Или есть лучший подход к достижению чего-то подобного? Спасибо!

Ответ 1

Вы не можете передавать аргументы непосредственно методам щелчка, но вы можете получить элемент, нажатый внутри шаблона 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>

См. соответствующую документацию здесь.

Ответ 2

Короткий ответ
Элемент находится в параметре события: 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.)