Question

情况相当简单。我有一个对象列表，我想在无序列表中呈现它们，每个列表项包含一个链接。由于某种原因，KO绑定不解析我的列表项中的项目。首先，这是一个小提琴：

HTML非常简单：

<ul data-bind="foreach: vm.MenuItems">
    <li data-bind="css: CssClass">
        <a data-bind="text: LinkText, attr: { href: Href }" />
    </li>
</ul>

这是最小的JS：

var ViewModel = (function () {
    function ViewModel(json) {
        var self = this;
        self.vm = ko.mapping.fromJS(json);
    };

    return ViewModel;
})();

var json = {
    MenuItems: [{
        LinkText: "Item 1",
        Href: "http://www.google.com",
        CssClass: "active"
    },{
        LinkText: "Item 2",
        Href: "http://www.yahoo.com",
        CssClass: "inactive"
    },{
        LinkText: "Item 3",
        Href: "http://www.microsoft.com",
        CssClass: "inactive"
    }]
};

var vm = new ViewModel(json);
ko.applyBindings(vm);

我得到的错误是当它尝试绑定到锚标记时，没有任何绑定正在解析。

“未捕获的ReferenceError：无法处理绑定”text：function （）{return LinkText}“消息：LinkText未定义”

我怀疑它与LI元素上的绑定有关，但我删除了它仍然失败，甚至认为绑定工作得很好。我之前和Knockout一起工作过，这应该不是那么难，但我不能完全理解这一点。

Answer 1

我想我发现了这个问题。 Knockout不会重写你的

<a data-bind="text: LinkText, attr: { href: Href }" />

标签应该写成

<a data-bind="text: LinkText, attr: { href: Href }"> </a>

它是有效的HTML并且能够像

一样注入文本节点

<a data-bind="text: LinkText, attr: { href: Href }">
    *the value of LinkText here* 
</a>

See this Fiddle

敲除foreach绑定不解析嵌套元素

1 个答案: