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

Question

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

基本上，我只想单击一个按钮以使用适当的数据更新视图。我觉得我很接近了。我错过了什么，我将如何使用$.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);
});

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