Javascript 在不同的情况下使用foreach

这是“查询”对象

这是“用户”对象

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

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;
}

我的jade模板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

---

如何在knockout中执行此操作

我将预处理您的查询数组，并向包含该用户查询的用户对象添加一个数组。大概是这样的：

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;
        }));
    }
}

var viewModel=function（）
{
var self=这个；
self.users=user\u数组；
self.querys=query\u数组；
对于（var i=0；i

---

您的Jade模板应该可以正常工作，无需任何修改。

我想Paul已经找到了。但由于我花时间在这把小提琴上，这里有一个使用嵌套绑定的。诀窍在于如何调用绑定$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 -->

效果非常好，我想这就是我想要的，但我有一个小问题，即使是Paul的解决方案。当我将另一个元素推到用户数组或查询数组中时，不会刷新视图，但数组中有新元素。这个更新的小提琴添加了一个按钮，用于伪装交互性，它似乎起到了作用：我会检查以确保您没有用常规数组擦除可观察数组。也许尝试添加“预调试器”？我的错误。。。我正在推送viewModel.queries（）.push（）之类的元素，而不是queries.push（）

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;
        }));
    }
}

<!-- 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 -->