Question

我遇到了问题。在我深入研究之前，让我给你一些细节。我正在学习，所以这不是一个真正的项目。其次，该应用程序基于youtube上的acadmind视频教程（https://www.youtube.com/watch?v=56TizEw2LgI&list=PL55RiY5tL51rajp7Xr_zk-fCFtzdlGKUp）的教程，这里是github链接（https://github.com/pin2plane/Academind-nodejs-shopping-cart）该教程是使用hbs模板框架构建的。我试图用PUG构建同一个项目。我遇到了一个迭代问题：

我们有cart.add函数：

module.exports = function Cart(oldCart) {
this.items = oldCart.items || {};
this.totalQty = oldCart.totalQty || 0;
this.totalPrice = oldCart.totalPrice || 0

this.add = function (item, id) {
    //If the item exists in the stored item, go to increase the qty, price of that item line
    //Also update the totalQty and totalPrice


    var storedItem = this.items[id];
    //if the item not there, then add the item to the empty items object
    if (!storedItem) {
        storedItem = this.items[id] = { item: item, qty: 0, price: 0 };
    }

    storedItem.qty++;
    storedItem.price = storedItem.item.price * storedItem.qty;
    this.totalQty++;
    this.totalPrice += storedItem.item.price;
};

专注于这一行：

 storedItem = this.items[id] = { item: item, qty: 0, price: 0 };

如您所见，对象属性包括item [object，object]，qty和price

shopping-cart.hbs视图是：

{{# if products }}
<div class="row">
    <div class="col-sm-6 col-md-6 col-md-offset-3 col-sm-offset-3">
        <ul class="list-group">
            {{# each products }}
                <li class="list-group-item">
                    <span class="badge">{{ this.qty }}</span>
                    <strong>{{ this.item.title }}</strong>
                    <span class="label label-success">${{ this.price }}</span>
                    <div class="btn-group">
                        <button class="btn btn-primary btn-xs dropdown-toggle" type="button" data-toggle="dropdown">Action <span class="caret"></span></button>
                        <ul class="dropdown-menu">
                            <li><a href="/reduce/{{this.item._id}}">Reduce by 1</a></li>
                            <li><a href="/remove/{{this.item._id}}">Remove All</a></li>
                        </ul>
                    </div>
                </li>
            {{/each}}
        </ul>
    </div>
</div>

我的问题是使用下拉按钮显示减少1并删除所有。

这是我的pug文件（产品从路由处理程序传递到视图）

     div.row
       div.col-lg-6.clearfix.offset-2.border
         p.badge.badge-warning.float-right Quantity #{product.qty}
         p  Total price: #{product.price} &nbsp
         each val in product
           p #{val.title} 
           p DB Item ID : #{val._id}
           .dropdown
               button.btn.btn-primary.dropdown-toggle(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false') Action
                 ul.dropdown-menu
                   li
                     a.dropdown-item(href='#') Reduce By 1
                   li
                     a.dropdown-item(href='#') Remove All

输出是这样的：

正如您所看到的，迭代超过了{item：item，qty：，price：} 但是因为我需要访问item._id（val._id），所以我无法移动这个div之外的按钮，除非有另一种获取项ID的方法，所以我可以将它传递给我的路由处理程序处理reduce减1并删除所有功能。

正如我在开始时所说，代码100％与hbs一起使用，因此它不是路由或表达，它是纯粹的哈巴狗问题，迭代工作正常，因为我能够访问每个产品在购物车对象中显示标题，ID和所有内容

它正在访问id并将其传递给我过去两天所花费的按钮，试图找出如何将id传递给按钮而不迭代对象但却无法理解它出

如果有一个哈巴狗忍者在那里有如何实现这一目标的经验，我将非常感激地向我展示我做错了什么或者如何正确设置它以匹配hbs的相同功能文件提供。

干杯

Answer 1

只需删除产品中的每个val，因为您不需要遍历对象。您所要做的就是将ACTION按钮组的下拉列表移动到徽章行下方，并使用＃{product.item._id}访问项目ID

Express.js中的JS Object PUG迭代问题

1 个答案: