使用的foreach

這是「查詢」對象使用的foreach

{ 
    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

我如何能在淘汰賽做

來源

2013-06-23 andrescabana86

我認爲保羅的得到了它。但是因爲我花時間在這個小提琴上，所以這是一個使用嵌套綁定的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 -->

來源

2013-06-23 22:28:10

它的工作真的很棒，我認爲這就是我要找的，但我有一個小問題，即使是Paul的解決方案。當我將其他元素推送到用戶數組或查詢數組時，不會刷新視圖，但數組具有新元素。 – andrescabana86

這個更新的小提琴添加了一個按鈕來僞造交互，它似乎工作：http://jsfiddle.net/LeCodeNinja/W8vQT/1/我會檢查，以確保你沒有消滅可觀察數組與常規陣列。也許嘗試添加「預調試器」？ –

我的錯誤...即時通訊推入元素像viewModel.queries（）。push（）而不是queries.push（） – andrescabana86

我會預處理您的查詢數組，並將數組添加到包含該用戶查詢的用戶對象。類似這樣的：

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模板應該無需任何修改即可使用。

來源

2013-06-23 22:20:36

回答

相關問題