リストjsのチェックボックス

Question

イムチェックボックスをHTMLリストにList jsを使用して値を移入しようとしているが、のようにオブジェクトに：

var values = [ 
    { 
    id: 12, 
    action: 'a', 
... 
    }, 
    { 
    id: 13, 
    action: 'b', 
... 
    } 
]; 

HTML：

<div id="users"> 
    <ul class="list"> 
    <li> 
     <span class="id"></span> 
     <span class="action"></span > 
     <input class="required" type="checkbox">Required 
    </li> 
    </ul> 

</div> 

と同様に初期化：

new List('users', options, values); 

どのように動作させるには？

値オブジェクトを完成させる方法が不足していて、最初にチェックボックスのチェック状態を初期化できるようにオプションオブジェクトを定義する方法をクリアしてください。

Answer 1

options変数を作成し、オブジェクト{ name: 'required', attr: 'checked'}に他のプロパティ名を追加します。作成された新しいリストにパラメーターとしてoptionsを渡します。

更新：あなたはあなたのアプリケーションにjqueryのを追加して喜んでいる場合

があなたのコメントに基づいて、私は、それがlist.jsを使用して可能であるとは思わない、これはあなたが組み込むことができる小さなハックです。

リストが作成されるとコードに$("input[checked='false']").prop('checked', false);を追加します。

注：大量のデータを扱う場合に備えて、リスト全体が一度設定されると、上記の行を非同期で追加する必要があります。

デモ -

var options = { 
 
    valueNames: ['id', 'action', { 
 
    name: 'required', 
 
    attr: 'checked' 
 
    }], 
 
    item: 'user-item' 
 
}; 
 

 
var values = [{ 
 
    id: 12, 
 
    action: 'a', 
 
    required: false 
 
    }, 
 
    { 
 
    id: 13, 
 
    action: 'b', 
 
    required: true 
 
    } 
 
]; 
 

 
var userList = new List('user-list', options, values); 
 

 
//Once the entire list is populated, set all checked='false' checkboxes to unchecked state. 
 
$("input[checked='false']").prop('checked', false);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script> 
 

 
<div id="user-list"> 
 
    <ul class="list"></ul> 
 
</div> 
 

 
<div style="display:none;"> 
 
    <!-- A template element is needed when list is empty, TODO: needs a better solution --> 
 
    <li id="user-item"> 
 
    <span class="id"></span> 
 
    <span class="action"></span > 
 
    <input class="required" type="checkbox" />Required 
 
    </li> 
 
</div>