使用Knockout通过click事件从JSON更新视图 [英] Using Knockout to update the view from JSON via click event

问题描述

每次尝试使用Knockout触发事件(例如单击按钮)时，我都尝试更新视图模型.单击红色按钮后，它应显示为红色花朵".单击蓝色时，应更改为蓝天".

I'm attempting to update the view model every time an event fires (e.g. button click) using Knockout. When the red button is clicked, it should read "red flower". When blue is clicked, this should change to "blue sky".

基本上，我只想单击一个按钮以使用适当的数据更新视图.我觉得我接近了.我想念的是什么?如何用$.getJSON扩展这种逻辑?

Basically, I just want clicking a button to update the view with the appropriate data. I feel like I'm close. What am I missing, and how would I extend this logic with a $.getJSON?

https://jsfiddle.net/ft8a6jbk/3

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

推荐答案

您可以尝试:

$('.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);
});

它可以工作，但不是推荐的使用基因剔除的方法.

It works but it's not the recommended way to use knockout.

这篇关于使用Knockout通过click事件从JSON更新视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！