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

Question

我有一个像这样的viewModel：

    var viewModel =
    {
        firstName: 'Fred'
    }

和像这样绑定它的文本框

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

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

Answer 1

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

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

正如您在this fiddle中看到的，如果您单击“按代码更改”按钮，将更改视图模型，但不会更改UI。

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

See fiddle。

我希望它有所帮助。

Answer 2

如果你执行一个属性或者在一个敲除绑定中删除observable，它就变成单向/只读。所以在下面的模型中例如：

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 3

如上所述，如果您的属性是可观察的，则执行它将阻​​止在绑定的表单字段更改时更新它。如果您的视图模型属性不是可观察的，那么防止对视图模型应用表单更改的另一个方法是绑定到表达式而不是直接绑定到属性，如下所示：

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

HTML：

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