使用敲除绑定 javascript 数组对象以查看

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>

它会正确显示名称的值，但我实际上需要基于 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