Question

I am working with MVC4 in producing a dynamic list that contains a number of elements. For example the markup for such is as follows:

    <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>

The data for the above markup is populated via an MVC model from a controller action when the page loads.

I have a number of things I want to achieve with this markup that I need assistance with. For starters, also on my page I have a number of checkboxes that correspond to the “data-categoryid” attribute above. For example I have checkbox 200, 300 etc. When the user checks any of these boxes, I only want to display the li tags that contains the value of the checkbox in the data-categoryid attribute?

I also have a drop down when a user selects price in it, I would like the li tags to order based upon the “data-price” attribute in the li’s?

I am working with jquery and knockout (keen to learn this) so looking to work with these to accomplish this.

I have added the markup to http://jsfiddle.net/tE6fb/

I have to further questions on the above. As mentioned I populated such via controller returning a view etc. As the user scrolls down the page, I will use infinite scrolling to make a server side call to return the next list of li tags and append them on to the above. I am thinking for ease of use, populate the partial view on the server and returning the content of it and append to the markup.

The alternative is not to load the markup at the start via server side but via client side, and bind the li tags with knockout. However I am concerned that by using this approach, no markup resides on the page on first load resulting in a delay for the user and also search engine bots wont be able to index this markup. Is my understanding of the above correct or is there a better way?

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/