polymer - 是否可以动态设置 Polymer 表达式？

Question

我想动态设置过滤器。可能吗？

dynamicFilter 是一个带有 Polymer 表达式名称的变量。

<template is="auto-binding">
  <span>{{value | dynamicFilter}}</span>
</template>

Answer 1

AFAIK，没有方便的方法在运行时将 Filter 分配给元素。但有一个简单的解决方法您可能会觉得有用:

我们将定义staticFilter函数，它将作为调用dynamicFilter的代理(包装器)。假设动态过滤器是 PolymerExpression 的实例，这可能会按如下方式组合在一起:

<polymer-element name="my-element" attributes="dynamicFilter">
  <template>
    <span>{{value | staticFilter(dynamicFilter)}}</span>
  </template>
  <script>
    PolymerExpressions.prototype.uppercase = function(input) {
      return input.toUpperCase();
    },
    PolymerExpressions.prototype.lowercase = function(input) {
      return input.toLowerCase();
    },

    Polymer({
      value: '¡Hola!',

      dynamicFilter: null,

      staticFilter: function(v, df) {
        return df ? PolymerExpressions.prototype[df](v) : v;
      }

    });
  </script>
</polymer-element>
<my-element></my-element>
<my-element dynamicFilter='uppercase'></my-element>
<my-element dynamicFilter='lowercase'></my-element>

现在，即使在运行时，您也可以自由设置 my-element 的 dynamicFilter 属性。

原因是过滤器是在元素初始化期间编译和绑定(bind)的；出于安全原因，后面没有 eval ，因此您不能简单地在那里传递任意动态值。另一方面，过滤器已准备好接收参数，这一事实实际上起到了作用。顺便说一句，您甚至可以将函数实例传递到那里，无论您是否对用于此目的的 PolymerExpression 不满意。