1

目标

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

问题

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

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

有人知道我该怎么做吗？

你已经尝试过什么？

没有什么。我阅读了 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 未定义；

绑定值：如果：existsAtList()

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

为什么是-1？

对谁否定这个话题，请说出来。我会感谢建设性的批评。

4

1 回答 1

2

要在加号按钮和减号按钮之间进行切换，请将两个按钮放在 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/

您还可以绑定到元素的标题<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 回答