我正在使用JSON数据(从url获取),jQuery和Handlebars包为基本的时尚网站编写前端代码。我是javascript和Handlebars的新手,这是我最初的前端开发尝试,因此我将发布此问题,因为我无法获得进一步的解决方案。
在上一个问题Why can't i iterate correctly through handlebars elements?中,我在HTML中使用x-handlebars-template作为标签。这次,我正在使用另一个名为“ template2”的模板,该模板使用x-handlebars-template2在同一HTML文件(index.html)中的另一个标签中使用,以便使用{{#each}}迭代。
链接:
在这段代码中,我试图从url中获取JSON数据,并尝试将其显示在我的购物车中(使用模式视图/弹出窗口)。如代码所示(使用JSON数据),使用“表单”创建了购物车。
<script id="cartTemp" type="text/x-handlebars-template2">
{{#each cart}}
<p id ="cartBell">
My Cart: <button id = "cartBtn" class ="openBtn">
<img src="https://cdn2.iconfinder.com/data/icons/web/512/Shopping_Cart-512.png" style="max-height:25px;" />
</button> My Total : $
</p>
<!-- The Modal -->
<div class="modal2" id="myModal2">
<!-- Modal content -->
<div class="modal-content2">
<span class="closeBtn" id="close2">×</span>
<h2>Cart Items</h2>
<table id="cartTable">
<tr>
<th>Product ID</th>
<th>Product Name</th>
<th>Quantity </th>
<th>Cost</th>
</tr>
<tr>
<td>#{{id}}</td>
<td>{{name}}</td>
<td>{{quantity}}</td>
<td>${{cost}}</td>
</tr>
</table>
{{/each}}
<form action="/cart" method="post" >
<fieldset>
<legend>This form will update the cart with a given product id, or remove if quantity=0</legend>
<ul>
<li>Product: <input type="number" name="productid"></li>
<li>Quantity: <input type="number" name="quantity"></li>
<li><input type="submit"></li>
</ul>
<input type="hidden" name="update" value="1">
</fieldset>
</form>
</div>
</div>
</script>
这是我的.js文件 我在哪里获取在'/ cart'中创建的JSON数据并对其进行解析。
var myRequest2 = new XMLHttpRequest()
myRequest2.open('GET' , 'http://127.0.0.1:8010/cart' )
myRequest2.onload = function() {
var myData2 = JSON.parse(myRequest2.responseText)
createCart(myData2)
var cartBtnEls = document.getElementsByClassName("openBtn")
var closeBtnEls = document.getElementsByClassName("closeBtn")[0]
cartBtnEls.onclick = function(){
var modal2 = document.getElementById("myModal2")
modal2.style.display = "block"
}
closeBtnEls.onclick = function(){
var modal2 = document.getElementById("myModal2")
modal2.style.display = "none"
}
}
myRequest2.send()
当我单击“ cartBtn”时,我希望看到我添加到购物车中的所有项目,但我只能看到第一个项目。为什么迭代不遍历购物车中添加的所有项目?
我尝试通过给其数量= 0删除显示的任何物品。然后出现我添加到购物车的第二个物品。
也,是否可以将购物车中的商品总数显示在某处? (也许计算迭代次数,但是如何计算?)
任何可能的解决方案?预先感谢!