2014年6月10日火曜日

konckoutによるjquery mobile listviewへのbinding

いろいろ試した結果、いくつかの発見を纏める。
・checkboxをlabelの中に入れると、visible bindingが効かなくなる
・「$index」そのまま使うと、文字列操作の式でfunctionの文字列が使われる。0からの値で利用したい場合は「$index()」を使う

JS
var appViewModel = { cards: ko.observableArray([]),
                   addMode: ko.observable(false)};

ko.applyBindings(appViewModel);

HTML
    <ul data-role="listview" id="card_list" data-inset="true" data-bind="foreach: cards">
                <li>
                    <a href="#">
                        <input type="checkbox" name ="card-to-add"
                                       data-bind="visible: $root.addMode,
                                                  attr: {id: 'checkbox-'+$index()}">
                        <label data-bind="attr: {for: 'checkbox-'+$index()}">
                            <span data-bind="text: CARDNAME"></span>
                        </label>
                    </a>
                </li>
            </ul>

0 件のコメント:

コメントを投稿