根据条件更改按钮的样式（使用KnockoutJS）

Question

目标

根据列表中的项目更改按钮的样式。

问题

我的应用程序上有两个列表：第一个是可用产品列表，其中有一个按钮可将其添加到购物车中;第二个是已经添加的产品列表。

如果已经添加了某些产品，我想将“加号按钮”更改为“减少按钮”以从列表中删除该项目。

有人知道我该怎么做？

您已尝试过什么？

无。我阅读了KnockoutJS文档，并在网上搜索了这个问题，但没有成功。我甚至不知道从哪里开始。

给我看代码！

很高兴。

我的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？

对谁负面的话题，请说出来。我会对建设性的批评表示感谢。

Answer 1

要在加号按钮和减号按钮之间切换，请将两个按钮放在跨度中并适当地显示/隐藏它们：

<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/