如何在淘汰赛中使用单向绑定

Question

我有一个像这样的viewModel:

    var viewModel =
    {
        firstName: 'Fred'
    }

和像这样绑定它的文本框

<input data-bind="value: firstName" >

我的印象是,这将设置单向绑定,因为firstName属性不是可观察的.对文本框的更改正在更新viewModel对象.有人可以解释发生了什么以及如果我的假设是错误的吗？

Answer 1

如果在knockout绑定中执行属性,则变为单向/只读.所以在下面的模型中例如:

class Person {
  constructor(data) {
    // Method 1: Consume observable using ()
    this.firstName = ko.observable(data.firstName);
    // Method 2: Omit the observable
    this.flatFirstName = data.firstName;
    this.lastName = ko.observable(data.lastName);
    this.fullName = ko.computed(() => `${this.firstName()} ${this.lastName()}`);
  }
}

const me = new Person({
  firstName: "John",
  lastName: "Smith"
});

ko.applyBindings(me);

我可以简单地通过在绑定中执行它来使FirstName成为单向/只读属性:

<input data-bind="value: firstName()">
<input data-bind="value: flatFirstName">
<input data-bind="value: lastName">
<label data-bind="text: fullName"></label>

所以现在第一个输入只获取值而不能设置它,但第二个输入将具有双向绑定并将更新LastName属性.

jsfiddle链接

希望这可以帮助.

Answer 2

单向绑定意味着：对 UI 的修改（在输入中键入）将“应用”到视图模型。但是，如果您更改 viewModel（通过代码），UI 将不会刷新。

如果需要通过代码（js）刷新UI，则必须使用可观察的。

正如您在此小提琴中所看到的，如果您单击“通过代码更改”按钮，视图模型将发生更改，但 UI 不会发生更改。

var viewModel = {
    firstName: 'Fred',
    test: function () {
        alert(viewModel.firstName);
    },
    change: function () {
        viewModel.firstName = "new Value";
    }
};

参见小提琴。

我希望它有帮助。