javascript - 根据条件更改按钮的样式(使用 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 绑定(bind)怎么样？

我已经试过了:

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

但是控制台返回给我这个:

Uncaught Error: Unable to parse bindings.

Message: ReferenceError: existsAtList is not defined;

Bindings value: if: existsAtList()

是的!我知道语法是错误的——就像我说的:“我什至不知道从哪里开始。”

为什么是-1？

谁否定了这个话题，请说出来。对于建设性的批评，我将不胜感激。

Answer 1

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

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

---

您还可以绑定(bind)到 <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>

如果您必须绑定(bind)许多属性，这可能会更麻烦，但是这两种方法都完全有效，并且都不会真正导致性能问题。这完全取决于您对更易于阅读、编写和调试的内容的偏好。

这是这种方式的 jsFiddle:http://jsfiddle.net/PKMXT/