Question

我有一个像这样的viewModel：

    var viewModel =
    {
        firstName: 'Fred'
    }

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

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

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

Answer 1

如果你执行一个属性或者在一个淘汰赛绑定中删除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 2

单向绑定意味着：在UI上进行修改（输入输入）将被应用＆＃39;到视图模型。但是如果您更改viewModel（通过代码），UI将不会刷新。

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

正如您在this fiddle中看到的那样，如果您点击“按代码更改”＆＃39;按钮视图模型将被更改但不会更改UI。

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

<强> See fiddle

我希望它有所帮助。

Answer 3

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

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

HTML：

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

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

3 个答案: