KnockoutJS組+按日期排序

Question

我有一組文章，如：

self.posts = ko.observableArray([ 
    { 
     id : 1, 
     is_stickey: false, 
     date: '2014-09-01', 
     content: 'demo content' 
    }, 
    { 
     id : 2, 
     is_stickey: true, 
     date: '2014-09-02', 
     content: 'demo content' 
    }, 
    // etcetera... 
] 

這一套是利用無限滾動增加。換句話說，其他項目將在稍後推入。

我試圖找到一個有效的（閱讀：快速，無不必要的迭代）的方式來做到以下幾點：

• 組帖子日期由is_stickey（升序）+日期
• 排序的職位（降序）
• 萬一「is_stickey」的變化，後爲動畫到新的位置

我想使用計算機可觀察到的數據轉換成一個對象如下：

{ 
    'stickey' : [ 
     { 
      id : 2, 
      is_stickey: true, 
      date: '2014-09-02', 
      content: 'demo content' 
     }, 
     { 
      id : 3, 
      is_stickey: true, 
      date: '2014-08-26', 
      content: 'demo content' 
     } 
    ], 
    '2014-09-01' : [ 
     { 
      id : 1, 
      is_stickey: false, 
      date: '2014-09-01', 
      content: 'demo content' 
     }, 
     { 
      id : 4, 
      is_stickey: false, 
      date: '2014-09-01', 
      content: 'demo content' 
     } 
    ], 
    '2014-08-14' : [ 
     { 
      id : 5, 
      is_stickey: false, 
      date: '2014-08-14', 
      content: 'demo content' 
     }, 
     { 
      id : 6, 
      is_stickey: false, 
      date: '2014-08-14, 
      content: 'demo content' 
     } 
    ] 
} 

可惜我卡在解決這一點：

1. 威爾KnockoutJS可以遍歷這個對象？
2. 它可以像這樣排序對象鍵嗎？
3. 當'is_stickey'發生變化時，我可以掛鉤到beforeMove/afterMove中嗎？
4. 而最重要的是;這是做這件事的正確方法嗎？效率和速度對我來說非常重要。

更新

下面的結果（視圖）是我心目中：

*sticky* 
    Id 2 demo content 
    Id 3 demo content 
*2014-09-01* 
    Id 1 demo content 
    Id 4 demo content 
*2014-08-14* 
    Id 5 demo content 
    Id 6 demo content 

Answer 1

你可以用搜索插件做到這一點。

樣本數據

var arr = [ 
     { 
      id : 2, 
      is_stickey: true, 
      date: '2014-09-02', 
      content: 'demo content' 
     },{ 
      id : 3, 
      is_stickey: true, 
      date: '2014-08-26', 
      content: 'demo content' 
     },{ 
      id : 1, 
      is_stickey: false, 
      date: '2014-09-01', 
      content: 'demo content' 
     }, 
     { 
      id : 4, 
      is_stickey: false, 
      date: '2014-09-01', 
      content: 'demo content' 
     },{ 
      id : 1, 
      is_stickey: false, 
      date: '2014-08-14', 
      content: 'demo content' 
     }, 
     { 
      id : 4, 
      is_stickey: false, 
      date: '2014-08-14, 
      content: 'demo content' 
     } 
] 

var vm = function vm(){ 
    var self = this 
    self.List = ko.observableArray(arr) 

    self.GroupByDate = function(){ 
     var myobject = ko.search.setData(self.List()) 
     var groupByDate = myobject.order('date').get()  
     self.List([]) 
     self.List(groupByDate) 
    } 

    self.SortPosts = function(){ 
     var myobject = ko.search.setData(self.List()) 
     var sorted = myobject.order('is_stickey').order('date').get()  
     self.List([]) 
     self.List(sorted) 
    } 
} 

ko.applyBindings(new vm()) 

而且

<div data-bind="foreach:List"> 
    <span>Date</span><span data-bind="text:date"></span> 
    <span>Content</span><span data-bind="text:content"></span> 
    <span>Sticky</span><span data-bind="text:is_stickey"></span><br /> 
</div> 

<input type="button" data-bind="click:GroupByDate" value="Group By Post"> 
<input type="button" data-bind="click:SortPosts" value="Sort"> 

fiddle demo