使用JavaScript / KnockoutJS在列表中查找特定属性

Question

1。目标

使用JavaScript，KnockoutJS或jQuery在列表中查找属性。

2。场景

我有一个商店应用程序与KnockoutJS合作，以动态化其UI。

3。问题

每个可以添加到我商店购物车的产品都有一个添加按钮，但只有当产品不在购物车上时才可用。

我需要使用购物车进行迭代，以发现我的可用产品列表中的每个产品是否已经存在。

4。 几段代码......

我要添加到列表中的可用产品的每个产品都使用此片段在按钮之间切换：

<!-- ko if: Summary.hasItem($element) -->
    <button class="btn btn-small action remove">
        <i class="icon-minus"></i>
    </button>
<!-- /ko -->
<!-- ko ifnot: Summary.hasItem($element) -->
    <button class="btn btn-small action add">
        <i class="icon-plus"></i>
    </button>
<!-- /ko -->

正如您所看到的，我正在使用hasItem()功能来检查产品是否已经在购物车上 - 但我必须实施它，我需要您的帮助才能做到这一点。< / p>

5。我已经尝试了什么

如下所示，我试图制作一个循环来检查购物车内的产品，直到...

self.hasItem = function (element) {
    var $productId = $(element).closest("li").data("productid"),
        products = self.products();

    if (products.length > 0) {
        for (var product in products) {
            if (products[product].id() == $productId) {
                return true;
            } else {
                return false;
            }
        }
    }
};

......出了点问题！ 接下来的章节。

6。出了点问题

我的大脑无法计算逻辑，但是当我为每个按钮设置此循环时，似乎当一个运行时，另一个不运行，或者如果列表中有项目，则另一个不添加。

7。游乐场

Play with this!

8。我需要问......

我的循环/逻辑是对的吗？

Answer 1

for循环中的代码仅对第一个产品执行。

你应该有这样的东西：

for (var product in products) {
        if (products[product].id() == $productId) {
            return true;
        } 
}
return false;

除了你应该在ko.utils中使用arrayFirst的循环旁边，add函数似乎有问题。

ng-click绑定提供DOM事件作为第二个参数，因此您可能希望更改方法的签名添加到

function(data,event) { 
    var element = event.target;
}

请参阅http://codepen.io/anon/pen/rcwil

self.add = function(model, event) {
    console.log($(event.target));

    var $productId = $(event.target).closest("li").data("productid"),
        $productName = $(event.target).closest("h1");

    self.products.push(new Product($productId, $productName));
};

Answer 2

你需要稍微改变一下，而不是调用“hasItem”，你应该在Product对象中有类似“isSelected”的东西。

然后，你可以循环你的产品并说（伪代码）如果不是“isSelected”然后显示添加按钮。单击此添加按钮后，Product对象的“isSelected”属性将设置为true。

让Knockout JS尽可能使用自包含的对象。

如：

<!-- ko foreach: Products -->
   <!-- ko if: IsSelected --> // Automatically inherited from parent
    <button class="btn btn-small action remove">
        <i class="icon-minus"></i>
    </button>
    <!-- /ko -->
<-- /ko -->

Answer 3

在你的情况下，这将起作用：

self.hasItem = function (element) {
    var $productId = $(element).closest("li").data("productid"),
        products = self.products();

     return ko.utils.arrayFirst(products, function(p){
         return (p.id() == $productId);               
     }) != null;
}

ko.utils.arrayFirst返回与给定谓词匹配的第一个项目;否则为空。