Question

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

html元素是输入文本框。

Answer 1

实现这一目标的最简单方法是不实际将两者绑定到同一个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());
}

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

Answer 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();
}

Answer 3

我会这样做：

视图

 <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
    })
};

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

3 个答案: