Knockout.js：是否可以使用 'with' 进行单向数据绑定？

Question

在 Knockout 文档中，据说如果我们不使用 ko.observable(...)，单向数据绑定是可能的：http://knockoutjs.com/documentation/value-binding.html

但是，下面的代码并不像我预期的那样工作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <form data-bind="with: selectedMerchant">
        <input data-bind="value: name"></input>
        <button data-bind="click: change"> CHANGE </button>
        <button data-bind="click: show"> SHOW </button>
    </form>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-debug.js" type="text/javascript"></script>
    <script>
        function PartnersViewModel() {
            self.selectedMerchant = {'name': 'John'};
            self.show = function() {
                alert(JSON.stringify(self.selectedMerchant));
            }
            self.change = function() {
                self.selectedMerchant = {'name': 'David'};
            }
        }
        ko.applyBindings(new PartnersViewModel());
    </script>
</body>
</html>

'selectedMerchant' 声明时没有 ko.observable(...)，因此它应该是单向绑定的。我希望一旦单击 'CHANGE' 按钮，输入框中的文本将变为 'David'。我也尝试了不同的方向 - 我更改了输入中的文本并单击 'SHOW' 按钮。消息框给出了它在开始时的初始值。

Answer 1

为了扩展 M. Ihsan 的正确答案，Knockout 将在不使用可观察对象和使用正常 JavaScript variables/objects 时以一种方式绑定。这是一个例子。

function ExampleObject(one, two) {
  var self = this;

  self.one = one;
  self.two = ko.observable(two);

  self.ChangeVariables = function() {
    self.one = "1";
    self.two("2");
    console.log(self.one, ko.toJS(self.two));
  }
}


function ViewModel() {
  var self = this;

  self.bindingExample = ko.observableArray();

  self.Load = function() {
    self.bindingExample.push(new ExampleObject("one way", "two ways"));
    self.bindingExample.push(new ExampleObject("one way", "two ways"));
    self.bindingExample.push(new ExampleObject("one way", "two ways"));
    self.bindingExample.push(new ExampleObject("one way", "two ways"));
  }

  self.Load();

}

ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<table border=1>
  <thead>
    <tr>
      <th>1 way</th>
      <th>2 way</th>
      <th></th>
    </tr>
  </thead>
  <tbody data-bind="foreach: bindingExample">
    <tr>
      <td data-bind="text: one"></td>
      <td data-bind="text: two"></td>
      <td> <a data-bind="click: ChangeVariables"> Change Variables</a></td>
    </tr>
  </tbody>
</table>

Answer 2

如果您想要一个将继续更新 UI 的真正的单向绑定，您可以使用计算可观察值。除非您为计算指定 "write" 属性，否则它将仅在模型->UI 方向上更新。话虽如此，您只需将输入框替换为跨度或标签以防止用户更新值即可获得相同的结果，因此我不确定我是否看到了单向绑定的实用性。

function PartnersViewModel() {
    var self = this;
    self.selectedMerchant = ko.observable({'name': 'John'});
    self.show = function() {
        alert(JSON.stringify(self.selectedMerchant()));
    }
    self.change = function() {
        self.selectedMerchant({'name': 'David'});
    }
    self.selectedName = ko.computed(function(){
      return self.selectedMerchant().name;
    });
}
ko.applyBindings(new PartnersViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-debug.js" type="text/javascript"></script>
    
<div data-bind="with: selectedMerchant">
  <input data-bind="value: $parent.selectedName"></input>
  <button data-bind="click: $parent.change"> CHANGE </button>
  <button data-bind="click: $parent.show"> SHOW </button>
</div>

如果你想要更可重用的东西，你可以制作一个只实现单一方向的自定义绑定：

ko.bindingHandlers.oneWayValue = {
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var value = ko.unwrap(valueAccessor());
        element.value = value;
    }
}

Answer 3

with 绑定已经是单向绑定，大多数绑定也是如此。它们是从模型到视图的单向路径，但这要求模型值是可观察的。

value 通常是双向绑定。文档中描述的单向性质是从视图到模型，这不是你想要的方向。

换句话说，你需要 selectedMerchant 才能被观察到。

Knockout.js：是否可以使用 'with' 进行单向数据绑定？

Knockout.js: Is it possible to make ONE-WAY data-binding with 'with'?

data-binding

knockout.js

two-way-binding