0

私は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の「data-price」属性に基づいてliタグを注文しますか？

私はjqueryとノックアウト（これを学びたいと思っています）を使用しているので、これを達成するためにこれらを使用することを検討しています。

http://jsfiddle.net/tE6fb/にマークアップを追加しました

上記についてさらに質問する必要があります。前述のように、ビューなどを返すコントローラーを介してデータを入力しました。ユーザーがページを下にスクロールすると、無限スクロールを使用してサーバー側の呼び出しを行い、次のliタグのリストを返し、上記に追加します。使いやすさを考えて、サーバーの部分ビューにデータを入力し、そのコンテンツを返し、マークアップに追加します。

別の方法は、サーバー側ではなくクライアント側を介して開始時にマークアップをロードし、liタグをノックアウトでバインドすることです。ただし、このアプローチを使用すると、最初の読み込み時にページにマークアップが存在せず、ユーザーの遅延が発生し、検索エンジンボットがこのマークアップのインデックスを作成できなくなるのではないかと心配しています。上記の私の理解は正しいですか、それともより良い方法がありますか？

4

1 に答える 1

0

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/

于 2013-02-05T22:50:36.390 に答える