如何将动态功能绑定到聚合物组件中? [英] How can i bind a dynamic function within a polymer component?

问题描述

就我所掌握的聚合物知识而言，

• 使用"on- *"语法将功能绑定到网络组件方法

• 使用香草html js绑定(使用onClick ="...")将全局窗口命名空间中可用的函数绑定

但是我想将一个函数(作为datamodel对象的属性提供)绑定到webcomponent模板. 一个旁注:将数据模型对象移动到全局javascript名称空间(即window.*)不是一种选择.

下面的示例不起作用，但恰好反映了我的用例:

...
Polymer('x-foo', {

    items : [
      ...,
      {
        label  : "ExampleCommand",
        action : function() {
            // do something
        }            
      }
      ...
    ]
})
...
<template>
    <template repeat="{{item in items}}">
        <paper-button onClick="{{item.action}}">
            {{item.label}});
        </paper-button>
    </template>
</template>
... 

还有一个问题，如果有人对如何解决上述问题有想法):我如何为功能提供其他参数?

我们将不胜感激:-)

解决方案

我不得不问团队这件事，因为这有点令人困惑.声明性事件绑定"与Polymer表达式不同.不幸的是，事件绑定和Polymer表达式都使用{{ }}语法，这意味着它们的工作原理相同.他们没有.事件绑定的范围是元素本身，而表达式的范围是模板实例的模型.

在Polymer 0.8中，我认为语法已更改，因此事件绑定不再使用{{ }}.希望这会清除它.

要获得所需的效果，可以在元素上定义一个方法，该方法查看事件目标，获取其模型，然后调用您定义的函数.

<polymer-element name="x-foo">
  <template>
    <template repeat="{{items}}">
      <button on-click="{{doAction}}">{{label}}</button>
    </template>
  </template>
  <script>
    Polymer({
      items: [
        {
          label: 'ExampleCommand',
          action: function() {
            alert('hello world');
          }
        },
        {
          label: 'AnotherCommand',
          action: function() {
            alert('another command');
          }
        }
      ],
      doAction: function(e) {
        e.target.templateInstance.model.action();
      }
    });
  </script>
</polymer-element>

这是在jsbin上运行的示例

As far as my Polymer knowledge goes I can

• bind a function using the "on-*" syntax to a webcomponent method

• bind a function available in the global window namespace using vanilla html js binding (using onClick="...")

But I want to bind a function (provided as property of datamodel objects) to the webcomponent template. One sidenote : Moving the datamodel objects to the global javascript namespace (i.e. window.*) is not an option.

The example below does'nt work but reflects exactly my use case :

...
Polymer('x-foo', {

    items : [
      ...,
      {
        label  : "ExampleCommand",
        action : function() {
            // do something
        }            
      }
      ...
    ]
})
...
<template>
    <template repeat="{{item in items}}">
        <paper-button onClick="{{item.action}}">
            {{item.label}});
        </paper-button>
    </template>
</template>
... 

one more question if someone has an idea how to solve the question above) : how can i provide additional arguments to function ?

Any help is appreciated :-)

解决方案

I had to ask the team about this because it's kinda confusing. Declarative event "bindings" are not the same thing as a Polymer expression. Unfortunately, both event bindings and Polymer expressions use the {{ }} syntax, which implies they work the same. They don't. The scope of event bindings is the element itself, whereas as an expression is scoped to the model for the template instance.

In Polymer 0.8, I believe the syntax has changed, so event bindings no longer use {{ }}. Hopefully that will clear it up a bit.

To achieve the effect you want, you can define a method on the element, which looks at the event target, grabs its model, and calls the function you've defined.

<polymer-element name="x-foo">
  <template>
    <template repeat="{{items}}">
      <button on-click="{{doAction}}">{{label}}</button>
    </template>
  </template>
  <script>
    Polymer({
      items: [
        {
          label: 'ExampleCommand',
          action: function() {
            alert('hello world');
          }
        },
        {
          label: 'AnotherCommand',
          action: function() {
            alert('another command');
          }
        }
      ],
      doAction: function(e) {
        e.target.templateInstance.model.action();
      }
    });
  </script>
</polymer-element>

Here's the example running on jsbin

这篇关于如何将动态功能绑定到聚合物组件中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！