javascript - 使用 JavaScript/KnockoutJS 查找列表中的特定属性

标签 javascript jquery knockout.js

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() 函数来检查产品是否已在购物车中 - 但我必须实现它,并且需要您的帮助来做到这一点。

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。 Playground

Play with this!

8。我需要问...

我的循环/逻辑是正确的吗?

最佳答案

在你的情况下,这会起作用:

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返回与给定谓词匹配的第一个项目;否则为空。

关于javascript - 使用 JavaScript/KnockoutJS 查找列表中的特定属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17491413/

相关文章:

javascript - 使用 Razor 维护 @section 标记内的 Javascript 代码突出显示

javascript - Knockout.js 根据另一个表单值更改表单值

javascript - 使用 VBscript 与网页上的表单交互并触发 JavaScript 事件

javascript - 如何将月/年的对象数组值拆分为月份和年份等两个值?

javascript - 从ajax动态加载导航中删除Attr(href)

javascript - jquery 重置追加()

php - 如何将此 XML 转换为 KML?

asp.net-mvc-3 - 发布一个无法与 DefaultModelBinder 一起使用的 Javascript 数组?

javascript - 建立内容脚本和后台页面之间的通信链接

javascript - Mvc FileUpload 添加/编辑自定义字段