Javascript 使用jquery和knockout筛选和排序li标记

我正在使用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等。当用户选中其中任何一个复选框时，我只想显示包含数据类别ID属性中复选框值的li标记

当用户在其中选择价格时，我也有一个下拉列表，我希望li标签根据li标签中的“数据价格”属性进行订购

我正在使用jquery和knockout（渴望了解这一点），因此希望能够使用它们来实现这一点

我已将标记添加到

我必须就上述问题提出进一步的问题。如前所述，我通过控制器返回视图等进行填充。当用户向下滚动页面时，我将使用无限滚动进行服务器端调用，以返回下一个li标记列表，并将它们附加到上面。我考虑的是易于使用，在服务器上填充部分视图并返回其内容并附加到标记中

另一种方法是不通过服务器端而是通过客户端在开始时加载标记，并使用knockout绑定li标记。然而，我担心的是，通过使用这种方法，第一次加载时页面上没有任何标记，这会导致用户延迟，而且搜索引擎机器人程序也无法索引此标记。我对上述内容的理解是否正确，还是有更好的方法

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');
});