聚合物双向数据绑定

Question

我定义了一个聚合物元素

    Polymer({
        is: 'disco-ccontrol',

        properties: {
            midiValue: {
                type: Number,
                value: 0,
                observer: '_valueChanged',
                notify: true
            },
            channel: {
                type: Number,
                value: 0
            },
            channelNumber: {
                type: Number,
                value: 0
            },
            ref: {
                type: Object,
                computed: '_computeRef(channel, channelNumber)'
            }
        },

        _computeRef: function(channel, channelNumber) {

            var ref = new Firebase("https://incandescent-inferno-8405.firebaseio.com/user/"+channel+"/"+channelNumber);
            ref.on("value", function(data) {
               this.midiValue = data.val().value;
            });

            return ref;
        },

        _valueChanged: function() {
            var message = { value: this.midiValue, channel: this.channel, channelNumber: this.channelNumber };
            if (this.ref) {
                this.ref.set(message);
            } 
        }

    });

我在另一个元素（父元素）中使用了这个元素

<disco-ccontrol midi-value="{{value}}" channel="{{channel}}" cn="{{channelNumber}}"></disco-ccontrol>

当我调整父项中的值属性时，它会传播给子项。当我更改子项中的值属性时（即在 disco-ccontrol 中），它不会向上传播。建立双向绑定我做错了什么？

Answer 1

在这个函数中

ref.on("value", function(data) {
    this.midiValue = data.val().value;
});

this 关键字未绑定到 Polymer 元素。因此，您没有在正确的对象上设置 midiValue。您可以使用 bind.

将 this 绑定到 Polymer 元素

ref.on("value", function(data) {
    this.midiValue = data.val().value;
}.bind(this);

聚合物双向数据绑定

Polymer two way data binding

polymer

polymer-1.0