使用从 JSON 派生的 Knockout observables 动态更新视图

Question

希望这不是一个坏习惯，但我试图在my previous question 的上下文中理解 Knockout observables。

我想用“红花”或“蓝天”更新视图，具体取决于单击的按钮。让我们假设 JSON 是静态的。如何在仅应用一次绑定的同时使用可观察对象更新视图？

小提琴：

https://jsfiddle.net/ft8a6jbk/3/

HTML：

<button class="blue">Blue</button>
<button class="red">Red</button>

<div data-bind="text: name"></div>
<div data-bind="text: things()[0].item1"></div>

<script>
  ko.applyBindings(viewModel);
</script>

JS：

var data = {
  "colors": [{
    "name": "blue",
    "things": [{
      "item1": "sky",
      "item2": "ocean",
    }, ]
  }, {
    "name": "red",
    "things": [{
      "item1": "flower",
      "item2": "sun",
    }, ]
  }, ]
};

$('.blue').click(function() {
  var viewModel = ko.mapping.fromJS(data.colors[0]);
});

$('.red').click(function() {
  var viewModel = ko.mapping.fromJS(data.colors[1]);
});

Answer 1

我怎样才能 [...] 只应用一次绑定？

像这样：

function Sample(data) {
  var self = this;
  
  self.colors = ko.observableArray();
  self.currentColor = ko.observable();
  
  ko.mapping.fromJS(data, {}, self);
}

var sample = new Sample({
  "colors": [{
    "name": "blue",
    "things": ["sky", "ocean"]
  }, {
    "name": "red",
    "things": ["flower", "sun"]
  }]
});

ko.applyBindings(sample);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>

<div data-bind="foreach: colors">
  <button data-bind="text: name, click: $root.currentColor"></button>
</div>

<div data-bind="with: currentColor">
  <h4 data-bind="text: name"></h4>
  <div data-bind="foreach: things">
    <span data-bind="text: $data" />
  </div>
</div>

注意事项：

• 不要编写 jQuery 事件处理程序。完全从淘汰代码中删除 jQuery。该规则的两个例外是：使用 Ajax（因为 Knockout 没有 Ajax 功能）和writing custom binding handlers。其他任何事情，最突出的 DOM 操作，都应该完全由 Knockout 管理。
• observable 是一个函数。您可以将它用作事件处理程序，就像我在上面的 click 绑定中所做的那样。这是它的工作原理：
  1. Knockout 将上下文数据（在本例中为单个“颜色”项）传递给事件处理函数，在本例中为 currentColor observable。
  2. 当使用值调用可观察对象时，它存储该值。
  3. 效果：即时事件处理程序和应用程序状态存储 - 无需自己编写单个函数。