1

目標

リストの項目に基づいてボタンのスタイルを変更します。

問題

私のアプリケーションには 2 つのリストがあります。1 つ目は、ショッピング カートに追加するためのボタンがある利用可能な製品のリストです。2 つ目は、既に追加されている製品のリストです。

すでに商品が追加されている場合、「プラスボタン」を「レスボタン」に変更して、リストから商品を削除したい。

誰かがこれを行う方法を知っていますか?

すでに試したことはありますか？

何もない。KnockoutJS のドキュメントを読み、この質問について Web で検索しましたが、成功しませんでした。どこから始めればよいかさえわかりません。

コードを見せて！

喜んで。

私のHTML：

<button class="btn btn-success btn-small add" 
        title="Add to your cart.">
    <i class="icon-plus"></i>
</button>

そしてJS：

function ProductLayoutViewModel() {
    var self = this;

    self.existsAtList = function () {
        console.log("Testing.");
    };
};

あと、ifバインディングはどうですか？

私はすでにこれを試しました：

<button class="btn btn-success btn-small add" 
        title="Adicionar à lista de comparação" 
        data-bind="if: existsAtList()">
    <i class="icon-plus"></i>
</button>

しかし、コンソールはこれを返します：

不明なエラー: バインドを解析できません。

メッセージ: ReferenceError: existsAtList が定義されていません。

バインディング値: if: existsAtList()

はい！私は構文が間違っていることを知っています。

なぜ-1？

トピックに否定的な人は、声を上げてください。建設的な批判に感謝します。

4

1 に答える 1

2

プラス ボタンとマイナス ボタンを切り替えるには、2 つのボタンをスパンに配置し、適切に表示/非表示にします。

<span data-bind="ifnot: existsAtList()">
    <button class="btn btn-success btn-small add" 
            title="Adicionar à lista de comparação">
        <i class="icon-plus"></i>
    </button>
</span>

<span data-bind="if: existsAtList()">
    <button class="btn btn-success btn-small add" 
            title="Eliminar de lista de comparação">
        <i class="icon-minus"></i>
    </button>
</span>

ここでデモを行いました: http://jsfiddle.net/rSD7q/

要素のタイトル<button>とクラスにバインドすることもできます。<i>

<button class="btn btn-success btn-small add" data-bind="attr: { title: existsAtList() ? 'Eliminar de lista de comparação' : 'Adicionar à lista de comparação' }">
    <i data-bind="attr: { class: existsAtList() ? 'icon-minus' : 'icon-plus' }"></i>
</button>

多くの属性をバインドする必要がある場合、これはより面倒になる可能性がありますが、どちらの方法も完全に有効であり、実際にパフォーマンスの問題が発生することはありません。読みやすく、書きやすく、デバッグしやすいものを選ぶのはあなた次第です。

この方法の jsFiddle は次のとおりです: http://jsfiddle.net/PKMXT/

于 2013-06-27T17:03:36.573 に答える