Question

我正在使用Knockout.js作为从JSON响应动态更新视图的方法。 JSON如下所示：

var data = {
  "Properties": {
    "Engine Capacity": "1499cc",
    "Doors": 3,
    "Extras": [
      "LED lights",
      "4WD"
    ],
    "Model": "123a"
  }
};

我在JavaScript中找到了一种构造<li>元素的方法：

for (var field in data['Properties']) {
  var value = data['Properties'][field];
  var out = '<li>' + field + ': ' + value + '</li>';
  console.log(out);
  // <li>Engine Capacity: 1499cc</li>
  // <li>Doors: 3</li>
}

我知道这不是理想的方法，因为在JavaScript中构造HTML并不是最佳实践。有一种方法可以在Knockout中打印出带有硬编码值的值：

<ul data-bind="foreach:$root.Properties">
  <li data-bind="text:$data:Doors"></li>
  <li data-bind="text:$data.Model"></li>

但是我想知道是否有可能使Knockout.js看起来像我在JavaScript代码中返回的样子？

Answer 1

这是您的操作方式：

var data = {
  "Properties": {
    "Engine Capacity": "1499cc",
    "Doors": 3,
    "Extras": [
      "LED lights",
      "4WD"
    ],
    "Model": "123a"
  }
};


var viewModel = {
    data: ko.mapping.fromJS({"Properties": data.Properties})
};

ko.applyBindings(viewModel);

<ul data-bind="foreach: data.Properties">
    <li>
        <b data-bind="foreachprop: props"> : 
            <span data-bind="value"> </span>
        </b>
    </li>
</ul>

更多参考：

使用Knockout从JSON编写列表元素

1 个答案: