绑定到列表中的列表计数

时间:2014-04-11 19:27:53

标签: jquery html knockout.js

我有以下结构:

购物清单基本上是一个字符串列表,但它由每个项目列表中的类别列表组成。

在我显示购物清单名称的foreach绑定中,我还想给出该列表中的项目数量。

基本上我想要这样的东西:

<ul id="list-list" data-bind="foreach: ShoppingLists">
    <li id="list-title" class="list-title" onclick="changecolor(this)">
        <div>
            <a style="cursor: pointer" data-bind="click: $parent.ShowList">
                <span data-bind="text: Description" style="font-size: 16px; color: #252525; font-weight:bold; text-decoration: none; padding-left: 4px;"></span>
                <div style="float: right; padding-right: 4px;">
                    <a style="padding-left: 6px; color: black;" data-bind="click: $root.Edit">Edit</a>
                    <a style="padding-left: 6px; color: black;" data-bind="click: $root.Delete">Delete</a>
                </div>
                <div>
                    <span style="padding-left: 6px; color: black;">Items in list: </span>
                    <span style="padding-left: 6px; color: black;" data-bind="text: $root.Count()"></span>
                </div>
            </a>
        </div>
    </li>
</ul>

使用此JavaScript:

Count: ko.computed(function(list){
            var val = 0;
            for(i = 0; i < $this.Categories.length; i++)
                val += $this.Categories[i].ListItems.length
            return val;
        }, this)

但是,我无法弄清楚如何正确计算这个值。

1 个答案:

答案 0 :(得分:1)

假设您的列表是可观察的......

this.List = observableArray();

您的List对象可以包含您的字符串和类别的observableArray:

this.Categories = observableArray();

您的Category对象可以包含Items列表:

this.Items = observableArray();

您可以在类别对象上执行类似的操作...

this.Count = ko.computed(function()
{
  return this.Items().Length;
}, this);

这应该为您提供每个类别的列表项目计数。