knockout.js - 如何在 knockout 中使用单向绑定(bind)

Question

我有一个这样的 View 模型:

    var viewModel =
    {
        firstName: 'Fred'
    }

和一个像这样绑定(bind)到它的文本框

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

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

Answer 1

如果您执行属性或将可观察对象放入 knockout 绑定(bind)中，它将成为单向/只读。因此，例如在以下模型中:

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

我可以通过在绑定(bind)中执行 FirstName 来将其设为单向/只读属性:

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

所以现在第一个输入只获取值并且不能设置它，但是第二个输入将具有双向绑定(bind)并将更新 LastName 属性。

希望这可以帮助。

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<input data-bind="value: firstName()">
<input data-bind="value: flatFirstName">
<input data-bind="value: lastName">
<label data-bind="text: fullName"></label>