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

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

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

小提琴：

https://jsfiddle.net/ft8a6jbk/3

HTML：

 Red Blue 
 
  ko.applyBindings(viewModel);  

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); }); 

它可以工作，但不是推荐的使用淘汰赛的方式。