Question

这是“查询”对象

{
    id: 1,
    name: "Name of the user",
    query: "The query of the user",
}

这是“用户”对象

{
    name:'Name of User'
}

有很多用户所以我制作了一个包含所有用户的数组以及包含所有查询的数组

query_array=ko.observableArray([{//query},{//other query}])
user_array=ko.observableArray([{//user},{//other user}])

这是我的观点模型

var viewModel=function()
{
    var self=this;
    self.users=user_array;
    self.queries=query_array;
}

我的玉模板index.jade

div.span12(data-bind='foreach:user')
    legend(data-bind="text:name")

这很好......但我需要这个

div.span12(data-bind='foreach:users')
    legend(data-bind="text:name")
    div.span12(data-bind="foreach:queries")
        //if query name == user.name
        span(data-bind="text:query")
        br

我怎样才能在淘汰赛中做到这一点

Answer 1

我认为保罗得到了它。但是因为我花时间在这个小提琴上，这是一个使用嵌套绑定的alternate solution。诀窍在于如何调用绑定。 $ data.name是当前用户的名称，而$ root则是视图模型根目录。

<!-- ko foreach: $root.users -->
<p>
    <div data-bind="text:$data.name"></div>
    <ul data-bind="foreach: $root.queries">
        <li data-bind="visible: $data.name == $parent.name">
            <div data-bind="text: $data.query"></div>
        </li>
    </ul>
</p>
<!-- /ko -->

Answer 2

我会预处理您的查询数组，并将数组添加到包含该用户查询的用户对象。像这样：

var viewModel=function()
{
    var self=this;
    self.users=user_array;
    self.queries=query_array;

    for(var i = 0; i < self.users().length; i++)
    {
        var user = users()[i];
        var username = user.name.toLowerCase();
        user.queries = ko.observableArray(ko.utils.arrayFilter(self.queries(), function(query)
        {
            return query.name.toLowerCase() === username;
        }));
    }
}

您的Jade模板无需任何修改即可使用。

在不同的情况下使用foreach

2 个答案: