1

更新: 以下の 3 番目の箇条書き (「次のことを試しました」セクション) は、修正に最も近いものです。基本的に、1) ボタンを無効にする、2) ui-disable を追加する、3) jqm を更新する、すべてデータ バインドまたはモデル内で行う必要があると思います。

私のプロジェクトで同様のものを構築するために、ノックアウトデモの1つをjqmで実行しようとしています。送信ボタンが無効にならないことを除いて、ほとんど機能しますが、項目 = 0 の場合はグレー表示されません。

jqm を削除すると、例は正常に機能し、ボタンは灰色になります。jqm は dom 操作のためにノックアウトと競合する可能性があることを認識しているため、次のことを試しました。

  • モデル メソッドでスタイルの更新をトリガーする:$('button').button();または$('.ui-page-active' ).page( 'destroy' ).page();
  • の後にバインディングを開始しpageinitます。これで全体が壊れました。

  • テストとして、ボタンを無効にする代わりに、データバインドを使用して ui-disable を設定してみました。クラスを適用しますが、jqmは何らかの形でリフレッシュする必要があります。更新を行うためにコードをデータ バインドに入れることはできますか?

    <button data-bind="css: {'ui-disable': gifts().length > 0}" type='submit'>Submit</button>

これをトラブルシューティングするために使用しているフィドルは次のとおりです。http://jsfiddle.net/wtjones/wkEgn/

私は何が欠けていますか？

    <form action='/someServerSideHandler'>
    <p>You have asked for <span data-bind='text: gifts().length'>&nbsp;</span> gift(s)</p>
    <table data-bind='visible: gifts().length > 0'>
        <thead>
            <tr>
                <th>Gift name</th>
                <th>Price</th>
                <th />
            </tr>
        </thead>
        <tbody data-bind='foreach: gifts'>
            <tr>
                <td><input class='required' data-bind='value: name, uniqueName: true' /></td>
                <td><input class='required number' data-bind='value: price, uniqueName: true' /></td>
                <td><a href='#' data-bind='click: $root.removeGift'>Delete</a></td>
            </tr>
        </tbody>
    </table>

    <button data-bind='click: addGift'>Add Gift</button>
    <button data-bind='enable: gifts().length > 0' type='submit'>Submit</button>
</form>

モデルコード:

var GiftModel = function(gifts) {
    var self = this;
    self.gifts = ko.observableArray(gifts);

    self.addGift = function() {
        self.gifts.push({
            name: "",
            price: ""
        });       
    };

    self.removeGift = function(gift) {
        self.gifts.remove(gift);                
    };

    self.save = function(form) {
        alert("Could now transmit to server: " + ko.utils.stringifyJson(self.gifts));
        // To actually transmit to server as a regular form post, write this: ko.utils.postJson($("form")[0], self.gifts);
    };
};

var viewModel = new GiftModel([
    { name: "Tall Hat", price: "39.95"},
    { name: "Long Cloak", price: "120.00"}
]);
ko.applyBindings(viewModel);

// Activate jQuery Validation
//$("form").validate({ submitHandler: viewModel.save });
4

1 に答える 1

4

うん。JS を介して (または KO を使用してこれらの小道具を変更して) ボタンのプロパティを変更する場合は、refresh メソッドを呼び出してビジュアル スタイルを更新する必要があります。

$('button').button('refresh');

したがって、モバイルボタンのスタイルを更新するデフォルトの代わりにカスタムバインディングを作成することをお勧めしますenable（適用されている場合）：

ko.bindingHandlers.mobileEnable = {
    update: function(el) {
        ko.bindingHandlers.enable.update.apply(el, arguments);
        $.fn.button && $(el).button('refresh');
    }
}

と...

<button data-bind='mobileEnable: gifts().length > 0' type='submit'>Submit</button>

修正されたフィドル: http://jsfiddle.net/wkEgn/2/

于 2013-03-16T16:04:26.990 に答える