对于计算绑定,更改似乎不会触发



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

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

的例子:

<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>

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

如果您真的想在纸输入上通知更改,您可以侦听value-changed事件,然后在"myObject.prop2"上执行notifyPath/set

<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-input现在允许您定义prefixsuffix,而不是使用表达式/过滤器来回转换值,如下所示-
<paper-input label="revenue" type="number">
  <div prefix>$</div>
</paper-input>
<paper-input label="email">
  <div suffix>@email.com</div>
</paper-input>

你甚至可以像这样定义复杂的输入(你需要创建你自己的date-input元素)-

<paper-input-container auto-validate>
   <label>Social Security Number</label>
   <ssn-input class="paper-input-input"></ssn-input>
   <paper-input-error>SSN invalid!</paper-input-error>
</paper-input-container>
上面的代码示例取自这里。你可以在Polymer的官方网站上了解更多。

最新更新