迭代對象的屬性knockoutjs

Question

從我已經能夠在網上找到的東西我不認爲有可能使用foreach data-bind在此時在knockout中遍歷可觀察對象的屬性。

如果有人可以幫我解決我想做的事情，我會非常感激。

比方說，我有電影的對象數組：

var movies = [{ 
    title: 'My First Movie', 
    genre: 'comedy', 
    year: '1984'  
}, 
{ 
    title: 'My Next Movie', 
    genre: 'horror', 
    year: '1988' 
}, 
]; 

而我想要做的是對電影的每個流派在表中顯示此數據，但不同的表。

所以我嘗試這樣的事情：

<div data-bind="foreach: movieGenre"> 
    <table> 
     <tr> 
      <td data-bind="year"></td> 
      <td data-bind="title"></td> 
      <td data-bind="genre"></td> 
     </tr> 
    </table> 
</div> 

和我的數據源改成這個樣子：

for (var i = 0; i < movies.length; ++i) { 
    if (typeof moviesGenres[movies.genre] === 'undefined') 
     moviesGenres[movies.genre] = []; 
    moviesGenres[movies.genre].push(movie); 
} 

我試了一下其他十幾個解決方案，和我開始想知道是否我缺乏對淘汰賽的瞭解（我仍然非常青睞），或者只是我想要的方式不可能。

Answer 1

你可以讓你的數組「電影」KO可觀察數組和數組「movieGenre」一個KO計算屬性。看看this fiddle。

爲了方便讀者，下面給出了小提琴中的代碼;

KO視圖模型

function MoviesViewModel() { 
    var self = this; 
    self.movies = ko.observableArray([ 
     { 
      title: 'My First Movie', 
      genre: 'comedy', 
      year: '1984' 
     }, 
     { 
      title: 'My Next Movie', 
      genre: 'horror', 
      year: '1988' 
     }, 
     { 
      title: 'My Other Movie', 
      genre: 'horror', 
      year: '1986' 
     } 
    ]); 

    self.movieGenre = ko.computed(function() { 
     var genres = new Array(); 

     var moviesArray = self.movies(); 
     for (var i = 0; i < moviesArray.length; i++) { 
      if (genres.indexOf(moviesArray[i].genre) < 0) { 
       genres.push(moviesArray[i].genre); 
      } 
     } 

     return genres; 
    }); 
}; 

HTML

<div data-bind="foreach: movieGenre()"> 
    <h3 data-bind="text: 'Genere : ' + $data"></h3> 
    <table border="solid"> 
     <thead> 
      <tr> 
       <th>Title</th> 
       <th>Genre</th> 
       <th>Year</th> 
      </tr> 
     </thead> 
     <tbody data-bind="foreach: $parent.movies"> 
      <!-- ko if: $data.genre === $parent --> 
      <tr> 
       <td data-bind="text: $data.title"></td> 
       <td data-bind="text: $data.genre"></td> 
       <td data-bind="text: $data.year"></td> 
      </tr> 
      <!-- /ko --> 
     </tbody> 
    </table> 
</div> 

正如你可以看到 「movieGenre」 由計算性能。每當可觀察數組「電影」發生變化時，moveGenre就會被計算並被緩存。但是，由於這並未聲明爲可寫計算屬性，因此無法將其與您的視圖綁定。因此，它的價值被用於數據綁定。

渲染方法只是循環計算出的「movieGenre」，併爲電影嵌套另一個循環。在向表中添加行之前，對於相應的表，將使用當前的movieGenre評估影片對象。這裏使用了無容器控制流程語法。我們可以使用「if」綁定，但是這會爲每個電影對象留下一個空的表格行，否則流派就是這樣。

$父綁定上下文用於訪問嵌套循環中的父上下文。

希望這會有所幫助。