如何将一个html元素绑定到两个observable?

时间:2013-08-15 20:43:08

标签: knockout.js

我知道如何将一个observable绑定到两个html元素,但是如何通过双向绑定将一个html元素绑定到两个observable?

html元素是输入文本框。

3 个答案:

答案 0 :(得分:3)

实现这一目标的最简单方法是不实际将两者绑定到同一个HTML元素,而是订阅一个observable的更改,设置另一个的值...如果这有意义......

在视图中 -

<div>
    <input data-bind="value: myFirstObs" />
    <span data-bind="text: myFirstObs" />
    <span data-bind="text: mySecondObs" />
</div>

并在视图模型中 -

var myFirstObs = ko.observable();
var mySecondObs = ko.observable();

myFirstObs.subscribe(function () {
    mySecondObs(myFirstObs());
}

你的问题肯定是一个独特的问题......

答案 1 :(得分:2)

您要求将单个输入字段绑定到两个可观察对象,但如果您的模型指示两个可观察对象应始终相等,则该逻辑应该在您的模型中,与您的视图和绑定无关。

要使两个总是相等的observable,你可以使一个是一个普通的observable,另一个是一个只读取并更新第一个的计算observable。

function ViewModel() {
    this.first = ko.observable();
    this.second = ko.computed({
        read: this.first,
        write: this.first
    });
}

然后您的输入可以绑定到任何一个。

编辑:如果你的两个属性实际上只是彼此的同义词,你可以为两者分配相同的observable。这利用了可观察对象作为实际对象。

function ViewModel() {
    this.second = this.first = ko.observable();
}

答案 2 :(得分:1)

我会这样做:

视图

 <input type="text" data-bind="value: firstname" />

viewmodel:

var  vm = {
    firstname : ko.observable(),
    firstnameCopy = ko.computed({
        read : function() {return this.firstname();},
        write : function(value) { this.firstname(value);},
        owner : this
    })
};