javascript - 使用 Polymer 绑定(bind)到方法

Question

使用 Polymer 时，是否可以绑定(bind)到方法而不是值？例如

<div>{{someMethod()}}</div>

或

<div>{{someMethod}}</div>

从源代码和文档来看，它不是。只是想确认一下。

Answer 1

不是直接的，但是有几种方法可以实现您想要的。我假设您想转换数据...？

1. 将属性定义为 ES5 getter

   有点作弊，但您可以将属性定义为 getter，然后将自定义逻辑包裹在返回的值周围。

   <div>{{likes}}</div>
   
   Polymer('my-tag', {
     firstName: 'John',
     get likes() {
       return this.firstName + ' ' + lastName + ' likes bread';
     }
   });
   

   演示:http://jsbin.com/nuyuqote/3/edit

   注意:请谨慎使用此选项。绑定(bind)到 setter/getter 在 Object.observe() 下不起作用，如果支持， polymer 将使用。参见 Scott's comment下面。

2. 自定义过滤器

   还没有记录:(

   <div>{{'thingy' | upperCaseFilter}}</div>
   
   Polymer('my-tag', {
     upperCaseFilter: function(value) {
       return value.toUpperCase();
     }
   });
   

   演示:http://jsbin.com/nuyuqote/1/edit

3. <prop>Changed

   参见 Scott's comment下面。

顺便说一句，我们没有类似 {{someMethod()}} 的原因之一在 Polymer 中是执行 JavaScript 的。通常认为执行类似 onclick="someMethod()" 的操作是一种反模式。因为很容易使自己受到 XSS 攻击之类的攻击。<​​/p>