如何使用模板选项将 JSON 对象数据绑定到敲除绑定?
How to bind the JSON object data to knockout binding with template option?
我正在使用 knockout js。现在我使用模板选项和本地 json 数据作为 datasource.In 这我无法将数据绑定到模板中的节点。
请在下面获取我的 html 代码:
<div data-bind="template:{name:'treeTemplate',data:{da:Data}}"></div>
<script id="treeTemplate" type="text/html">
<b data-bind="text:$data.text"></b>
请在下面获取我的脚本部分
var treeData = [
{ id: 1, text: "UK"},
{ id: 2, text: "Steven John" },
{ id: 3, text: "USA" },
{ id: 5, text: "Andrew" },
{ id: 4, text: "Angelica" }
];
window.viewModel = {
value: ko.observable(new Date(2015, 06, 15)),
Data: ko.observableArray(treeData)
};
$(function () {
// declaration
ko.applyBindings(viewModel);
});
我也更新了 jsfiddle 中的示例。请获取以下 link:
https://jsfiddle.net/38vnznht/
你能请任何人在 this.Thanks 上提出任何帮助吗?
你的第一个问题是模板对象中数据的使用。
data:{da:Data}
要遍历数组,您需要使用 foreach
foreach:data
因此,您需要更新绑定
// from this
<b data-bind="text:$data.text"></b>
// to this
<b data-bind="text: text"></b>
这是一个工作示例:
https://jsfiddle.net/wqe3s1vs/3/
此外,关于使用 "foreach" 命名模板的文档:
http://knockoutjs.com/documentation/template-binding.html#note-2-using-the-foreach-option-with-a-named-template
我正在使用 knockout js。现在我使用模板选项和本地 json 数据作为 datasource.In 这我无法将数据绑定到模板中的节点。
请在下面获取我的 html 代码:
<div data-bind="template:{name:'treeTemplate',data:{da:Data}}"></div>
<script id="treeTemplate" type="text/html">
<b data-bind="text:$data.text"></b>
请在下面获取我的脚本部分
var treeData = [
{ id: 1, text: "UK"},
{ id: 2, text: "Steven John" },
{ id: 3, text: "USA" },
{ id: 5, text: "Andrew" },
{ id: 4, text: "Angelica" }
];
window.viewModel = {
value: ko.observable(new Date(2015, 06, 15)),
Data: ko.observableArray(treeData)
};
$(function () {
// declaration
ko.applyBindings(viewModel);
});
我也更新了 jsfiddle 中的示例。请获取以下 link:
https://jsfiddle.net/38vnznht/
你能请任何人在 this.Thanks 上提出任何帮助吗?
你的第一个问题是模板对象中数据的使用。
data:{da:Data}
要遍历数组,您需要使用 foreach
foreach:data
因此,您需要更新绑定
// from this
<b data-bind="text:$data.text"></b>
// to this
<b data-bind="text: text"></b>
这是一个工作示例: https://jsfiddle.net/wqe3s1vs/3/
此外,关于使用 "foreach" 命名模板的文档: http://knockoutjs.com/documentation/template-binding.html#note-2-using-the-foreach-option-with-a-named-template