javascript - 使用从 JSON 派生的 Knockout 可观察量来动态更新 View

Question

希望这不是不好的做法，但我试图在 my previous question 的背景下理解 Knockout 可观察值.

我想用“红花”或“蓝天”更新 View ，具体取决于单击的按钮。我们假设 JSON 是静态的。如何在仅应用一次绑定(bind)的情况下使用可观察对象来更新 View ？

fiddle :

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

How can I [...] while only applying my bindings a single time?

像这样:

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 事件处理程序。从您的 knockout 代码中完全删除 jQuery。此规则的两个异常(exception)是:使用 Ajax(因为 knockout 没有 Ajax 功能)和 writing custom binding handlers 。其他任何事情，尤其是 DOM 操作，都应该完全由 Knockout 管理。
• 可观察量是一个函数。您可以将其用作事件处理程序，就像我在上面的 click 绑定(bind)中所做的那样。这是它的工作原理:
  1. Knockout 将上下文数据(在本例中为单个“颜色”项)传递给事件处理函数(在本例中为 currentColor 可观察对象)。
  2. 当使用值调用可观察量时，它存储该值。
  3. 效果:即时事件处理程序和应用程序状态存储 - 无需您自己编写单个函数。