web-dev-qa-db-ja.com

Polymer-クリックした関数内にdom-repeatedアイテムを渡す

オンクリックで関数内にdom-repeatedアイテムを渡すにはどうすればよいですか？私のコードは動作しません：

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

または、このようなことを達成するためのより良いアプローチはありますか？ありがとう！

polymer-1.0
21
romerk

On-clickメソッドに引数を直接渡すことはできませんが、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>

関連ドキュメント こちら を参照してください。

45
pikanezi

短い答え
アイテムはイベントパラメータにあります：e.model.item

From documentation ：

テンプレート内に宣言型イベントハンドラーを追加すると、リピーターはリスナーに送信される各イベントにモデルプロパティを追加します。モデルはテンプレートインスタンスの生成に使用されるスコープデータであるため、アイテムデータは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を使用）、またはテンプレートの親ノードの1つに追加されたリスナーには追加されません。このような場合、modelForElementメソッドを使用して、特定の要素を生成したモデルデータを取得できます。 （対応するitemForElementおよびindexForElementメソッドもあります。）

7
pomber