使用Knockout通过点击事件从JSON更新视图

Question

每次使用Knockout触发事件（例如按钮点击）时，我都会尝试更新视图模型。单击红色按钮时，应显示红色花＆＃34;。单击蓝色时，应该更改为＆＃34;蓝天＆＃34;。

基本上，我只想点击按钮以使用适当的数据更新视图。我觉得我很亲近。我缺少什么，以及如何使用$.getJSON扩展此逻辑？

小提琴：

https://jsfiddle.net/ft8a6jbk/3

HTML：

<button class="red">Red</button>
<button class="blue">Blue</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",
    }, ]
  }, ]
};

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

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

Answer 1

您可以尝试：

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

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

它有效，但不推荐使用淘汰赛。