Question

希望这不是一种不好的做法，但我试图在my previous question的背景下理解Knockout可观测量。

我想用红花＆＃39;更新视图。或者＆＃39;蓝天＆＃39;，具体取决于点击的按钮。让我们假定JSON是静态的。我怎样才能使用observable来更新视图，同时只应用我的绑定一次？

小提琴：

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

我只能一次只应用我的绑定吗？

像这样：

＆＃13;

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

＆＃13;

<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>

＆＃13;

注意：

不要编写jQuery事件处理程序。完全从你的淘汰代码中删除jQuery。此规则的两个例外是：使用Ajax（因为knockout没有Ajax函数）和writing custom binding handlers。任何其他的，最突出的DOM操作，应该完全由Knockout管理。
一个可观察的是一个功能。您可以将它用作事件处理程序，就像我在click绑定中所做的那样。这是如何工作的：
1. Knockout传递上下文数据，在这种情况下是单个＆＃34;颜色＆＃34; item，到事件处理函数，在本例中是currentColor observable。
2. 当使用值调用observable时，存储该值。
3. 效果：即时事件处理程序和应用程序状态存储 - 无需自己编写单个函数。

使用从JSON派生的Knockout observable动态更新视图

小提琴：

HTML：

JS：

1 个答案: