knockout.js - 如何在淘汰赛中使用单向绑定

Question

我有一个这样的视图模型：

    var viewModel =
    {
        firstName: 'Fred'
    }

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

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

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

Answer 1

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

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 属性。

希望这可以帮助。

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>

Answer 2

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

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

正如您在这个小提琴中看到的那样，如果您单击“按代码更改”按钮，视图模型将被更改，但 UI 不会更改。

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

见小提琴。

我希望它有所帮助。

Answer 3

如前所述，如果您的属性是可观察的，则执行它会阻止它在绑定的表单字段更改时被更新。如果您的视图模型属性不是可观察的，则防止表单更改应用于视图模型的另一个技巧是绑定到表达式而不是直接绑定到属性，如下所示：

var viewModel =
{
    firstName: 'Fred',
    age: 25,
}

HTML：

<input data-bind="value: (firstName + '')" />
<input data-bind="value: (age + 0)" />