自定义过滤器不在对象中工作

Question

如何使用bind？

使我的自定义过滤器工作

不工作示例：

JSON：

{ "name": "Adrian" }

HTML：

<template bind="{{user}}">
  <p>{{name | filterName}}</p>
</template>

但是当我使用重复时它会正常工作。

工作示例：

JSON：

[
  { "name": "Adrian 1" },
  { "name": "Adrian 2" }
]

HTML：

<template repeat="{{user in users}}">
  <p>{{user.name | filterName}}</p>
</template>

Answer 1

如果您已将filterName定义为元素原型下的函数...

Polymer('my-element', {
  filterName: function(value){
    return value.toUpperCase()
  }       
});

当我们做的时候

<template>
   {{ user.name | filterName }}
<template>

您可以访问您的元素及其属性“user”，“users”和filterName回调。

当你这样做时

<template>
  <template bind="{{user}}">
     {{name | filterName}}
  </template>
</template>

您的外部模板可以访问user和filterName。

但是你的内部模板现在必然只能看到用户对象。您的范围仅限于用户。当您使用bind时，这是一种特殊情况。

此处有更多信息... https://github.com/PolymerLabs/polymer-patterns/blob/master/snippets/basics/using-bind-to-create-a-single-template-instance.html

尽管如此，您还可以选择：

1-不太理想 - ＆gt;将回调添加为对象中的属性。您的模型现在负责dom转换。吮！

2-如果您要重复使用过滤器，可以将其转换为全局表达式

PolymerExpressions.prototype.filterName = function (value) {
  return value.toUpperCase();
};

现在你可以在任何地方使用。