Question

我试图将方法绑定到纸质按钮的on-tap属性。经过大量测试后，我发现我只能绑定一个（缺少更好的单词）顶级函数，而不是模板中对象的方法。

例如，我有一个模板，我绑定了许多对象，其中一个是用户对象。对象用户有一堆方法和变量，比如＆＃39; isNew＆＃39;或者声誉＆＃39;用户对象还有一个方法＆＃39; addReputation＆＃39;

我可以使用像这样的对象变量：

       <template if = '{{user.new}}'><h1>{{user.name}}</h1></template>

我可以像这样绑定按钮：

      <paper-button on-tap='{{addReputation}}'>Add Rep</paper-button>

但不是这样的：

      <paper-button on-tap='{{user.addReputation}}'>Add Rep</paper-button>

有谁知道为什么会这样？

Answer 1

如果将方法设置为元素原型的处理程序，则可以正常工作。这样你仍然可以保持动态：

<script src="http://www.polymer-project.org/webcomponents.min.js"></script>
<script src="http://www.polymer-project.org/polymer.js"></script>

<polymer-element name="my-element" on-tap="{{tapHandler}}">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    click me
    <content></content>
  </template>
  <script>
    Polymer({
      created: function() {
       this.user = {
         method: function() {
           alert('hi');
          }
        };
        this.tapHandler = this.user.method;
      }
    });
  </script>
</polymer-element>

<my-element></my-element>

Answer 2

我正在分享我的插件以解决上述问题。 plunk link

在模板中

<button on-tap="{{fncall}}" data-fnname="b">b call</button>

在剧本中

x.fncall = function(e) {
    var target = e.target;
    var fnName = target.getAttribute("data-fnname");
    return x.datamodel[fnName]();
}

Polymer(x);

聚合物绑定点击对象方法

2 个答案: