knockout.js - 如何将一个 html 元素绑定到两个可观察对象？

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

您询问将单个输入字段绑定到两个可观察对象，但如果您的模型规定两个可观察对象应该始终相等，那么该逻辑应该在您的模型中，独立于您的视图和绑定。

要拥有两个始终相等的 observable，您可以将一个设为普通 observable，另一个设为计算 observable，它只读取和更新第一个。

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

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

编辑：如果您的两个属性实际上只是彼此的同义词，您可以为两者分配相同的 observable。这利用了 observables 作为实际对象的优势。

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