我试图基于json对象渲染菜单,但链接不会被渲染。
function MenuItem(item) {
this.id = item.id;
this.name = item.name;
this.url = item.url;
this.parentid = item.parentid,
this.isSelected = ko.observable(item.isSelected);
this.userRoles = item.userRoles;
if (item.Items) {
this.Items = ko.observableArray($.map(item.Items, function (i) {
return new MenuItem(i);
}));
}
else {
this.Items = ko.observableArray();
}
}
function MenuViewModel(root) {
var self = this;
self.Root = new MenuItem(root);
}
function SampleMenuData() {
return {
id: 0,
name: "Root",
url: null,
parentid: null,
isSelected: false,
userRoles: null,
Items: [
{
id: 1,
name: "Home",
url: "/home/index",
parentid: 0,
isSelected: true,
userRoles: null,
Items: {
},
},
{
id: 4,
name: "Products",
url: "/products/index",
parentid: 0,
isSelected: false,
userRoles: null,
Items: {
},
},
],
};
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<h2>Menu</h2>
<nav data-bind="visible: Root.Items().length > 0">
<ul data-bind="foreach: Root.Items()">
<li>
<a data-bind="attr: { href: url, text: name }">
</a>
</li>
<ul data-bind="foreach: Items()">
<li>
<a data-bind="attr: { href: $data.url, text: $data.name}"> </a>
</li>
</ul>
</ul>
</nav>
<script>
$(function() {
var vm = new MenuViewModel(SampleMenuData());
ko.applyBindings(vm);
});
</script>
如果我使用类似的东西:
<li data-bind="text: name">
</li>
它会正确显示name的值,但实际上我需要根据url属性创建链接。您可以在此处查看示例:http://jsfiddle.net/430szwu2/1/
为什么这不起作用的任何想法?
感谢。
答案 0 :(得分:2)
您错误地将text
设置为attr
绑定处理程序值的一部分。试试这个:
<a data-bind="attr: { href: url }, text: name">
此外:
不需要额外的$data
前缀。
您的SampleMenuData
将内部Items
属性定义为对象而非数组。
请参阅Documentation并更新Fiddle