使用jquery和knockout過濾和排序li標籤

Question

我正在使用MVC4來生成包含許多元素的動態列表。例如，對於這樣的標記如下：

<ul> 
<li class="item" data-price="1" data-categoryid="200,300,400"> 
<!-- further markup --> 
</li> 
<li class="item" data-price="4" data-categoryid="210,310,400"> 
<!-- further markup --> 
</li> 
<li class="item" data-price="3" data-categoryid="220,030,430"> 
<!-- further markup --> 
</li> 
<li class="item" data-price="6" data-categoryid="250,300,410"> 
<!-- further markup --> 
</li> 
</ul> 

用於上述標記的數據通過一個MVC模型填充從控制器動作加載頁面時。

我有很多事情想用這個標記來實現，我需要幫助。對於初學者來說，在我的頁面上，我也有一些複選框與上面的「data-categoryid」屬性相對應。例如，我有複選框200,300等。當用戶檢查這些框中的任何一個時，我只想顯示包含data-categoryid屬性中複選框值的li標籤？

當用戶選擇價格時，我也有一個下拉菜單，我想要li標籤根據li的「data-price」屬性進行排序嗎？

我正在與jquery和淘汰賽（熱衷於學習這一點），所以希望與這些工作來實現這一目標。

我已經添加了標記來http://jsfiddle.net/tE6fb/

我不得不進一步對上述問題。正如我所提到的，通過控制器返回視圖等來填充這些信息。當用戶向下滾動頁面時，我將使用無限滾動來進行服務器端調用，以返回li標籤的下一個列表並將它們附加到上面。我在考慮易用性，在服務器上填充部分視圖並返回它的內容並追加到標記中。

另一種方法是不通過服務器端通過服務器端加載標記，而是通過客戶端加載，並將li標籤與knockout綁定。不過，我擔心的是，通過使用這種方法，第一次加載時頁面上不會存在標記，從而導致用戶延遲，而且搜索引擎機器人也不會爲此標記編制索引。我對上述正確的理解還是有更好的辦法？

Answer 1

http://api.jquery.com/

var $li = $('ul li'); 
$('input[type=checkbox]').change(function(){ 
    $li.filter('[data-categoryid*='+ this.value +']').toggle(this.checked); 
}); 

$('select').change(function(){ 
    $li.sort(function(a, b){ 
     return a.dataset.price > b.dataset.price 
    }).appendTo('ul'); 
}); 

http://jsfiddle.net/zPfWj/