Question

自从0.4-0.5时代以来，我还没有使用过Polymer，我习惯使用像<my-element hidden="{{foo != bar}}"></my-element>这样的隐藏属性

现在在Polymer 1.0中，我看到必须使用方法中的计算值来处理任何不是直接布尔值的值。我的代码是这样的：

<my-element hidden="{{_computeHidden()}}"></my-element>

然后在脚本部分：

Polymer({
    is: 'super-element',
    properties: {...},
    _computeHidden: function(){
         console.log('its being called, mkay');
         return !(foo == bar);
    }
});

现在在控制台中，页面刷新后消息会出现两次，但当foo的值发生更改时，元素不会消失。我做错了什么？

Answer 1

所以，有两个问题。正如Maria所说，您必须将_computeHidden方法绑定到将响应Polymer通知的参数。因此，必须将foo和bar都声明为元素的属性。

另一个问题是“隐藏”是boolean attribute，这意味着它的存在表明该元素应该被隐藏。在Polymer 1.0中，使用$中的hidden$=更改隐藏到属性绑定中并将处理字符串。如果没有$，hidden=将只评估原始布尔值。 hidden不在原生html属性中所需$的列表中，因此您可以自行选择。

Polymer({
    is: 'my-element',
    properties: {
      foo: Boolean,
      bar: Boolean
    },
    _computeHidden: function(){
      return !(this.foo == this.bar);
    }
});

<my-element hidden$="{{_computeHidden(foo, bar)}}"></my-element>

使用此annotated attribute binding，只有当您的计算值真实时才会在元素上显示“隐藏”，这是您想要的行为。使用简单的“=”绑定，即使函数返回true，或者为null或任何其他值，也会出现“hidden”。

Answer 2

如果要在foo更改时触发重新计算函数，则必须确保foo是属性并将其作为参数传递给函数。这是一个小例子。

<dom-module id="register-me">
    <template>
        <div hidden$="{{compute(ishidden)}}">Hello from my local DOM</div>
        <button on-click="toggle">Toggle Hidden</button>
    </template>
    <script>
        Polymer({is: "register-me",
            properties: { ishidden: {
                type: Boolean,
                value: false
            } },
            compute: function() {
                console.log("computing...");
                return this.ishidden;
            },
            toggle: function() {
                this.ishidden = !this.ishidden;
            }
        });
    </script>
</dom-module>

请注意，要绑定到属性，您应该使用$=。

Polymer 1.0中的隐藏属性

2 个答案: