将javascript数组对象绑定到使用knockout查看

Question

我试图基于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/

为什么这不起作用的任何想法？

感谢。

Answer 1

您错误地将text设置为attr绑定处理程序值的一部分。试试这个：

<a data-bind="attr: { href: url }, text: name">

此外：

1. 不需要额外的$data前缀。

2. 您的SampleMenuData将内部Items属性定义为对象而非数组。

请参阅Documentation并更新Fiddle