限制和排序knockout.js foreach項目

Question

我真的很新knockout.js。我試圖達到的目標是限制每件​​物品。這裏是我的源：

<div data-bind="foreach: news"> 
     <!-- ko if: catId === '4' --> 
      <div class="news-item"> 
       <a data-bind="attr: { href: url, title: title }"> 
        <div class="news-header-text" data-bind="text: title"></div> 
       </a> 
       <div class="news-date" data-bind="text: date" /></div> 

      </div> 
     <!-- /ko --> 
</div> 

這是我的javascript：

(function() 
     { // Wrap in function to prevent accidental globals 
      if(location.protocol != "data:") 
      { 
       $(window).bind('hashchange', function() 
       { 
        window.parent.handleChildIframeUrlChange(location.hash) 
       }); 
      } 

      // Class to represent a row in the seat reservations grid 
      function cebesEnNewsIndex(title, date, url, catId, hits) 
      { 
       var self = this; 
       self.title = title; 
       self.date = date; 
       self.url = url; 
       self.catId = catId; 
       self.hits = hits; 
      } 

      // Overall viewmodel for this screen, along with initial state 
      function cebesEnNewsIndexViewModel() 
      { 
       var self = this; 


       // Non-editable catalog data - would come from the server 

       // Editable data 
       self.news = ko.observableArray([ 
       new cebesEnNewsIndex("Welcome to Cebes Enterprise", "18 Mey 2012", "#", '4', '20'), 
       new cebesEnNewsIndex("Groove for Dummies", "20 Mey 2012", "#", "4", "21"), 
       new cebesEnNewsIndex("New Features of Cebes Framework", "18 Mey 2012", "#", "3", "19"), 
       new cebesEnNewsIndex("Welcome to Cebes Enterprise", "20 Mey 2012", "#", "3", "24"), 
       new cebesEnNewsIndex("Welcome to Cebes Enterprise sdfadfa", "18 Mey 2012", "#", '4', '20'), 
       new cebesEnNewsIndex("Groove for Dummiessdfadf", "20 Mey 2012", "#", "4", "21"), 
       new cebesEnNewsIndex("New Features of Cebes Frameworksdfad", "18 Mey 2012", "#", "3", "19"), 
       new cebesEnNewsIndex("Welcome to Cebes Enterprisdfadfe", "20 Mey 2012", "#", "3", "24"), 
       new cebesEnNewsIndex("Welcome to Cebes Enterprissdfadfe", "18 Mey 2012", "#", '4', '20'), 
       new cebesEnNewsIndex("Groove for Dummiesdfads", "20 Mey 2012", "#", "4", "21"), 
       new cebesEnNewsIndex("New Features of Cebes Framework", "18 Mey 2012", "#", "3", "19"), 
       new cebesEnNewsIndex("Welcome to Cebesasdfa Enterprise", "20 Mey 2012", "#", "3", "24"), 
       new cebesEnNewsIndex("Welcome to Cebessdfad Enterprise", "18 Mey 2012", "#", '4', '20'), 
       new cebesEnNewsIndex("Groove fsdfaor Dummies", "20 Mey 2012", "#", "4", "21"), 
       new cebesEnNewsIndex("New Featuresadfas of Cebes Framework", "18 Mey 2012", "#", "3", "19"), 
       new cebesEnNewsIndex("Welcome tosdfad Cebes Enterprise", "20 Mey 2012", "#", "3", "24"), 
       new cebesEnNewsIndex("New Emsfadfployee", "22 Mey 2012", "#", "5", "25") 
       ]); 


      } 


      ko.applyBindings(new cebesEnNewsIndexViewModel()); 
     })(); 

，你可以在提琴手看到，過濾功能和顯示8個新聞項目

我想限制數量並根據具有相同數據的日期項目對數字進行排序變成這樣（僅顯示3個過濾和排序的新聞項目）：

http://jsfiddle.net/2Ffqn/

這裏是我的腳本的jsfiddle鏈接：http://jsfiddle.net/StRa6/ 保持簡單，請編輯並保存我的jsfiddle。 任何建議，歡迎。

謝謝。

Answer 1

您不應該像這樣在視圖中放置業務邏輯。更好的解決方案是使用computed observable創建一個過濾的數組，並綁定到該數組。

self.selectedNews = ko.computed(function() { 
    return ko.utils.arrayFilter(self.news(), function(i) { 
     return i.catId == 4; //Or, you know, whatever 
     }) 
    }); 

這裏是t he fiddle。