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

Posted 2023-05-07

【中文标题】如何在淘汰赛中使用单向绑定

【英文标题】：How to use a one way binding in knockout

【发布时间】：2013-09-13 17:12:54

【问题描述】：

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

    var viewModel =
    
        firstName: 'Fred'
    

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

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

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

【问题讨论】：

那你一定是在使用敲除映射插件。被映射对象的所有属性都被转换为可观察对象。

【参考方案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>

【参考方案2】：

单向绑定意味着：对 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.

希望对你有帮助。

【参考方案3】：

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

var viewModel =

    firstName: 'Fred',
    age: 25,

html：

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

【讨论】：

就像一个魅力，你甚至可以像那样使用<input data-bind="value: (firstName)" />