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>

现在即使在运行时也可以自由设置dynamicFilter的{{1}}属性。

原因是my-element在元素初始化期间被编译和绑定;出于安全原因，后面没有filters，因此您不能简单地在那里传递任意动态值。另一方面，过滤器已准备好接收参数，而这个事实实际上就可以解决问题。顺便说一句，你甚至可以在那里传递函数实例，无论你是否对此eval不满意。

Answer 2

您的用例不是很清楚，但您可以使用this.injectBoundHTML作为解决方法。当您需要动态更改过滤器时，只需重新输入范围内容

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

2 个答案: