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