knockoutのview model変数へのアクセス

View Model定義
var appViewModel = function() {
    var self = this;
    self.cards = ko.observableArray([]);
    self.editMode =  ko.observable(false);
    self.selectedItems =  ko.observable(0);
};

Binding
window.vm = new appViewModel();
ko.applyBindings(vm,document.getElementById("#mycardpage"));

アクセス
window.vm.cards([]);

jqm knockoutによるbuttonのenable

knockoutのenableによって、buttonのenable/disableできるが、jqmと併用する際、いくつかの注意点がある。

1)jqm <a  class="ui-btn ui-icon-info ui-btn-icon-left ui-btn-inline">情報</a>
のようの,<a>にはそもそもdisableできない。

2)<input type="button" data-icon="info" class="ui-btn ui-icon-info ui-btn-icon-left ui-btn-inline">を使用すると、なぜかiconが表示されない。深く考えず、<button>を使うことで解決した。

JQMにてlistviewの中にbuttonを表示させる

Listviewの中に、buttonを追加しようと思って、下記ではボタンの形はでてきない。

<div class="ui-block-d">
                            <a href="#" data-role="button" data-icon="gift">情報</a>
</div>

そこで、以下のように変更したところで、解決できた。

<div class="ui-block-d">
                            <a href="#" class="ui-btn ui-icon-gift ui-btn-icon-left">情報</a>
                        </div>

jquery mobileとknockout併用際checkboxレイアウト崩れる対応

jquery mobileとknockout併用し、APPを開発しているが、getMyCards()実行したら、konckoutでvisible: falseをbindingしているcheckboxは表示されてしまった。もう一度getMyCards()実行すると、ちゃんと表示しなくなった。

<li><a href="#mycardpage" data-theme="a" onclick="getMyCards();">Myカード</a></li>

そこで、以下の2つ方法があった。

1)getMyCards()の最初に$.mobile.changePage("#mycardpage");追加
2) onclickのところを以下のように変更
<li><a href="#mycardpage" data-theme="a"
                       onclick="$(document).on('pageinit','#mycardpage',function(){
                                                                       getMyCards();
                                                                       });">Myカード</a></li>

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>

jquery mobileのcheckboxを選択できる状態にする

jquery mobileを使って、JSで動的にcheckboxを追加しても、クリックしても何も反応はない。そこで、以下のJSを挿入することで解決できた。

$("[type=checkbox]").checkboxradio(); //add this line to enable checkbox