是否可以动态设置 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 属性。

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

Answer 2

您的用例不是很清楚，但您可以使用 this.injectBoundHTML 作为解决方法。当需要动态改变filter时，只需重新注入span

的内容即可

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

Is it possible to set Polymer expressions dynamically?

web-component

polymer