变化似乎不会触发计算绑定

时间:2015-08-31 05:33:09

标签: binding polymer

如果我为结构对象上的所有更改创建一个观察者,除非绑定是对计算绑定中的值的更改,否则将调用观察者。

这是预期的行为吗?如果是这样,我如何捕获计算绑定中属性的更改?

示例:

<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<dom-module id="binding-test">

<template>
    <paper-input label="Not computed" value="{{myObject.prop1}}"></paper-input>
    <paper-input label="Computed" value="{{computeIt(myObject.prop2)}}"></paper-input>
</template>

<script>
    Polymer({
        is:"binding-test",

        properties: {
            myObject: {
                type: Object,
                notify: true,
                value: {
                    prop1: 1,
                    prop2: 2
                }
            }
        },

        observers: [
            'somethingChanged(myObject.*)'
        ],

        somethingChanged: function(changeRecord) {
            // This code is never executed when the Computed input field is changed
            console.log(changeRecord);
        },

        computeIt: function(value) {
            return value;
        }
    });
</script>
</dom-module>

1 个答案:

答案 0 :(得分:1)

我可能错了,但我认为计算绑定单向,与计算属性相同。

如果您确实想要通过纸张输入通知更改,您可以收听value-changed事件,然后执行notifyPath / {{1在set上。

"myObject.prop2"

查看此plunker

更新

我认为对您的问题有更好的解决方案。 <paper-input label="Computed" on-value-changed="valueChanged" value="{{computeIt(myObject.prop2)}}"></paper-input> valueChanged: function(e) { this.set("myObject.prop2", e.detail.value); } 现在允许您定义paper-inputprefix,而不是使用表达式/过滤器来回转换值 -

suffix

您甚至可以定义这样的复杂输入(您需要创建自己的<paper-input label="revenue" type="number"> <div prefix>$</div> </paper-input> <paper-input label="email"> <div suffix>@email.com</div> </paper-input> 元素) -

date-input

上面的代码示例来自here。您可以在Polymer的官方网站here上阅读更多相关信息。