使用Knockout从JSON中写入列表元素

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>

更多参考：

• 如何使用敲除迭代对象(而不是数组(
• 映射：foreach绑定仅第一次工作