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

Hopefully this isn't bad practice, but I am trying to understand Knockout observables within the context of my previous question.

希望这不是坏习惯，但我试图在我之前的问题的背景下理解Knockout可观察量。

I want to update the view with 'red flower' or 'blue sky', depending on which button is clicked. Let's presume the JSON will be static. How can I go about using observables to update the view while only applying my bindings a single time?

我想用“红色花朵”或“蓝天”更新视图，具体取决于单击的按钮。我们假设JSON是静态的。如何在仅仅应用我的绑定一次时使用observable来更新视图？

Fiddle:

https://jsfiddle.net/ft8a6jbk/3/

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

1 个解决方案

#1

How can I [...] while only applying my bindings a single time?

我怎么能只在一次申请我的绑定？

Like this:

喜欢这个：

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

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

Notes:

笔记：

Don't write jQuery event handlers. Remove jQuery from your knockout code entirely. The two exceptions to this rule are: Using Ajax (since knockout has no Ajax functions) and writing custom binding handlers. Anything else, most prominently DOM manipulation, should be governed by Knockout completely.
不要编写jQuery事件处理程序。完全从你的淘汰代码中删除jQuery。此规则的两个例外是：使用Ajax（因为knockout没有Ajax函数）和编写自定义绑定处理程序。任何其他的，最突出的DOM操作，应该完全由Knockout管理。
An observable is a function. You can use it as an event handler, like I did above in the click binding. Here is how this works:
1. Knockout passes the context data, in this case a single "color" item, to the event handler function, in this case the currentColor observable.
2. Knockout将上下文数据（在本例中为单个“颜色”项）传递给事件处理函数，在本例中为currentColor observable。
3. When an observable is called with a value, it stores that value.
4. 当使用值调用observable时，它会存储该值。
5. Effect: Instant event handler and application state storage - without writing a single function yourself.
6. 效果：即时事件处理程序和应用程序状态存储 - 无需自己编写单个函数。
可观察是一种功能。您可以将它用作事件处理程序，就像我在上面单击绑定中所做的那样。以下是它的工作原理：Knockout将上下文数据（在本例中为单个“颜色”项）传递给事件处理函数，在本例中为currentColor observable。当使用值调用observable时，它会存储该值。效果：即时事件处理程序和应用程序状态存储 - 无需自己编写单个函数。

#1