聚合物1.0：有没有办法从一个属性传递一个聚合物函数的参数？
有没有办法从它的<template>一个元素属性传递一个聚合函数的参数？
<script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html" /> <dom-module id="example-element"> <template> ... <paper-button id="foo" on-tap="bar">Click</paper-button> ... </template> </dom-module> <script> (function() { Polymer({ is: 'example-element', properties: {...}, bar: function(arg){ // Do stuff using argument arg } }); })(); </script>
背景研究
我已经梳理了关于此事的文件 。 它没有说你是否可以。 但是当我尝试它时，它失败了。 但也许我没有正确地做。 所以我需要一些帮助。
我遇到的唯一事情是事件监听器 ，它似乎不能接受我想传递的参数。 说，一个id或一个name 。
先前的尝试
我尝试过（不成功）做这样的事情：
<paper-button id="foo" on-tap="bar('foo')"> Click </paper-button>
但似乎没有任何工作。
事件监听者的想法不起作用，因为他们限制了参数，我不能得到我需要的，比如说。
您可以使用HTML5数据属性。 尝试像这样：
<paper-button id="foo" on-tap="bar" data-args="foo,some other value,2">Click</paper-button> ... <script> (function() { Polymer({ is: 'example', properties: {...}, bar: function(e){ var args = e.target.getAttribute('data-args').split(','); // now args = ['foo', 'some other value', '2'] } }); })(); </script>
经过search，我发现我认为是最干净的可能的解决scheme。
如果纸张button在模板内，例如
<template is="dom-repeat" items="{{allItems}}" as="item"> <paper-button on-tap="itemTapped">[[item.text]]</paper-button> </template>
然后可以通过传递给函数的事件对象中的“model”属性来访问属性。
itemTapped: function(oEvent){ // oEvent.model.get is the getter for all properties of "item" in your bound array console.log(oEvent.model.get('item.task')); }
对上述评论中提到的细微差别发光。
如果读取数据绑定，则必须使用$= 。
<paper-button on-tap="_handleTap" data-foo="foo" data-bar$="[[bar]]">Tap</paper-button> ... _handleTap: function(e) { var foo = e.target.dataset.foo; var bar = e.target.dataset.bar; }
在dom-repeat ，可以在e.model.item上find该item （或者您input的任何名称）。
<template is="dom-repeat" items="[[items]]" as="someItem"> <paper-button on-tap="_handleTap">Tap</paper-button> </template> ... _handleTap: function(e) { var item = e.model.someItem; }
有没有办法从它的<template>的一个元素的属性传递一个聚合物函数的参数。
而不是使用事件使用计算的绑定 。 计算的绑定可以接受文字string。
检查下面的工作示例。 在这个例子中，一个button可以隐藏基于传递的参数。
<script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html" /> <dom-module id="example-element"> <template> <button id="foo-one" on-tap="barEvent">Click foo-one</button> <button id="foo-two" hidden="{{barTest('value-two')}}">Click foo-two</button> <button id="foo-three" hidden="{{barTest('value-three')}}">Click foo-three</button> </template> </dom-module> <script> Polymer({ is: "example-element", barEvent: function (event) { console.log(event.target.id); }, barTest: function (arg) { if (arg === "value-two") { return true; } else { return false; } } }); </script> <example-element></example-element>
在尝试了这里提到的解决scheme之后，我对@Amit和@Mowzer解决scheme进行了一些修改，我这样做了：
<dom-module id="dial-buttons"> <template> <div on-click="handleClick" data-args="0, num-input"> <p>0</p> <paper-ripple></paper-ripple> </div> </template> <script> Polymer({ is: 'dial-buttons', properties: { ... }, handleClick: function(e) { var args = Polymer.dom(e).path[1].getAttribute('data-args').split(','); alert(args[0] + args[1]); } }); </script> </dom-module>
刚才我得到这个工作：
<paper-button id="foo" on-tap="bar" data-args="baz,qux,quux">Click</paper-button> ... <script> (function() { Polymer({ is: 'example', properties: {...}, bar: function(e){ var args = e.target.dataset.args.split(','); // ['baz', 'qux', 'quux'] } }); })(); </script>
可能最有效的方法来检索参数如下：
<paper-button on-tap="_getArgs" data-args="foo,bar,qux">Click</paper-button> ... _getArgs: function(e) { var args = Polymer.dom(e).rootTarget.getAttribute('data-args'); ... }
根据情况，干净的方式通常使用dom-repeat 。 如果你可以将数据格式化为一个对象数组，你可以使用e.model来获取所有的东西。
