Question

如何在点击中传递函数内的dom重复项？我的代码不起作用：

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

或者是否有更好的方法来实现这样的目标？谢谢！

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

请参阅相关文档here。

Answer 2

简短回答
该项目位于事件参数中：e.model.item

来自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），或者将侦听器添加到其中之一模板的父节点。在这些情况下，您可以使用用于检索模型数据的modelForElement方法生成给定元素。（也有相应的 itemForElement和indexForElement方法。）

聚合物 - 在点击功能内传递dom重复的项目

2 个答案: