如何在knockoutJS中设计时处理未知属性

Question

我不确定，如果我正确地提出这个问题，我会尝试解释这个情景。我觉得在处理淘汰赛时我会想念一些简单的东西。

我读了（后来写了）多个xml文件。这些文件有一些相同的条目和一些不同的条目：

<elements>
  <id>123</id>
  <unknown>some text</unknown>
</elements>

在阅读了xml文件之后，我想出了一个observableArray，我可以像大多数教程中提到的那样访问它而没有任何问题。

所以在这个例子中我读取和编辑“id”没有问题，因为我知道它叫“id”：

<span data-bind="text: $data.id"></span>

但是xml中有些条目我不知道，但它们在observableArray中，我可以“看到”，如果我引用$ data：

<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

这显示了我未知的部分：

...
{
  "unknown": "some text"
}
...   

要编辑此属性，我必须按名称访问它们，还是有其他选项？ 所以我的问题是通过以下方式访问它：

<input data-bind="value: $data.???" />

如果需要更多信息，请告知我们。

感谢您的想法和答案。

Answer 1

您可以将未知的数据结构转换为已知的 ViewModel 结构

像

for(var name in data) {
   this.values.push(new ValueViewModel(name, data[name]));
}

http://jsfiddle.net/AKzLM/

Answer 2

html-markup：

<div data-bind="foreach: $data.elemente">
  <pre data-bind="text: ko.toJSON($data)"></pre>
  <ul data-bind="foreach: $root.element">
    <div data-bind="if: $parent[$data]" >
      <label data-bind="text: $data"></label>
      <input data-bind="value: $parent[$data]" />
    </div>
  </ul>
</div>

Javascript代码：

    // this is for "click: selected"
    this.selected = ko.observableArray();

    this.element = ko.computed(function () {
      if (self.selected().length === 0) {
        return [];
      }
      var bez = [];
      var obj = self.selected().elemente;
      console.log(obj);
      for (var n in obj) {
        for (var i in obj[n]) {
          bez.push(i);
        }
      }
      return bez;
    });

我对应的JsonObject（chrome视图）：

0: Object
   elemente: Array[3]
   0: Object
      meinfeld: "feldBalue1"
      __proto__: Object
   1: Object
      feldxyz: "xyzValue"
      __proto__: Object
   2: Object
      feld123: "Top 123"
     __proto__: Object

以及浏览器中的结果：

修改 一个很好的方法是使用自定义绑定处理程序：

ko.bindingHandlers.readXml = {
  init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
    console.log(allBindings());
    var xmlElements = getValueAccessor(valueAccessor());
    ko.bindingHandlers.foreach.init(element, xmlElements, allBindings, viewModel,   bindingContext);
  return {
    controlsDescendantBindings: true
  };
},
update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
  var xmlElements = getValueAccessor(valueAccessor());
  ko.bindingHandlers.foreach.update(element, xmlElements, allBindings, viewModel, bindingContext);
}
};