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

Question

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

html元素是一个输入文本框。

Answer 1

实现这一点的最简单方法是不将两者实际绑定到同一HTML元素，而是订阅一个可观察对象的更改，设置另一个的值。。。如果这有意义的话。。。

在视图中-

<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

您询问如何将单个输入字段绑定到两个可观察性，但如果您的模型规定这两个可观察性应该始终相等，那么该逻辑应该在您的模型中，与您的视图和绑定无关。

要有两个始终相等的可观测值，可以使一个为纯可观测值而另一个为仅读取和更新第一个的计算可观测值。

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

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

编辑：如果你的两个属性真的只是彼此的同义词，你可以为它们分配相同的可观察性。这利用了可观察性作为实际对象的优势。

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

Answer 3

我会这么做：

视图

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

视图模型：

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