Question

开发和库

ASP.NET 5
剃刀
KnockoutJS

我正在构建一个仪表板，我想在切换客户端时创建一个knockoutjs过滤器。数据将仅针对该客户端进行更新。客户端的下拉列表将在_Layout.cshtml文件中。这是我的代码：

_Layout.cshtml

<ul id="clients" class="dropdown-menu dropdown-user" data-bind="foreach: storeList()">
    <li>
        <a data-bind="attr: {href: '#'}, text: storeList.ClientName"></a>
    </li>
</ul>

_Dashboard.cshtml

$.getJSON("/System/GetClients", function (clientList) {
    function Event(event) {
        var self = this;
        self.event = ko.observable(event);
    }

    function EventsModel() {
        ...

        self.storeList = ko.computed(function () {
            return clientList;
        });

        $('#clients').unbind();
        ko.applyBindings(self, $('#clients'));

        ...
    }

    ko.applyBindings(new EventsModel());
});

我认为问题在于foreach：在接收数据之前绑定storeList。当我查看页面时，控制台中没有错误。下拉列表有6 li>一个元素应该但它们不会被渲染

<ul id="clients" class="dropdown-menu dropdown-user" data-bind="foreach: storeList()">
    <li>
        <a data-bind="attr: {href: '#'}, text: storeList.ClientName" href="#"></a>
    </li>
    <li>
        <a data-bind="attr: {href: '#'}, text: storeList.ClientName" href="#"></a>
    </li>
    <li>
        <a data-bind="attr: {href: '#'}, text: storeList.ClientName" href="#"></a>
    </li>
    <li>
        <a data-bind="attr: {href: '#'}, text: storeList.ClientName" href="#"></a>
    </li>
    <li>
        <a data-bind="attr: {href: '#'}, text: storeList.ClientName" href="#"></a>
    </li>
</ul>

这是clientList

的stringify版本

[{"ClientName":"admin","Description":"Admin Sample Account","Enable":true},{"ClientName":"DSG","Description":"DSG TEST","Enable":true},{"ClientName":"Pet","Description":"PetTEST","Enable":true},{"ClientName":"Test","Description":"Test Sample Account","Enable":true},{"ClientName":"Toys","Description":"Toy's","Enable":true}]

不确定有什么问题

Answer 1

storeList是一个计算的observable。因此，将它作为foreach中的函数进行处理是可以的。你的错误发生在a标签上。

你再次调用storeList，这是错误的。除此之外，您将其用作getter属性，但它是一个功能。

只需使用带有ClientName属性的a，而不使用clientList.ClientName即可完成。

Knockout正确渲染元素，因为你可以看到渲染的li元素列表

带有Razor布局的Knockout JS

1 个答案: