如何使用 cookie 数组中的项目填充 KO 绑定列表

How to populate KO binded list with items from a cookie array

本文关键字:填充 KO 绑定 列表 项目 何使用 cookie 数组      更新时间:2023-09-26

我正在构建一个cookie来临时保存购物车项目,并尝试使用我的cookie中的数组字符串填充淘汰列表。

但是KO似乎不明白cookie中的数组是一个数组,也没有遍历表上的数组。

当用户单击"添加到购物车"按钮时,会发生这种情况:

$("#add2cart").click(function() {
function complete() {
//Animation saying added to cart
    $("<div>").text("Added to cart!").appendTo("#log");
    $("#log").show("fast");
  //formats date for db
    var datetime = new Date().toISOString().slice(0, 19).replace("T", " ");
  //gathers cookie data
 var itemsString = $.cookie("cookieCart");
    var items = "";
    if (itemsString === "undefined") {
        itemsString = "";
    } else {
        if (itemsString != null) {
            //parses the cookie array
            items = JSON.parse(itemsString); // unserialize
        } else {
            items = [];
        }
        //UPDATE *I REMOVED THE BRACKETS BECAUSE IT WAS MAKING AN ARRAY OF AN ARRAY*
     var newItem = { datetime: datetime, id: id, typeid: typeid, qty: 1       };
        items.push(newItem); // modify
        $.cookie("cookieCart", JSON.stringify(items), { path: "/" });  //   serialize
    }
}
$("#add2cart").fadeOut(1000, "linear", complete);
});

推送到数组中的两个项目的示例:

[[{"datetime":"2016-02-17 14:31:34","id":"749","typeid":"13","qty":1}]

,[{"datetime":"2016-02-17 14:59:26","id":"756","typeid":"13","qty":1}]]

所以现在我想让一个表自动填充这些项目的日期时间。所以我的ko看起来像这样:

var itemArray = [];
var cartItems = $.cookie("cookieCart");
itemArray = JSON.parse(cartItems); // unserialize
ko.applyBindings({
cartItemArray: cartItems
});

我的表格看起来像这样:

<table>
<tbody data-bind="foreach: cartItemArray">
    <tr>
<td data-bind="text: datetime"></td>
    </tr>
</tbody>
</table>

当我运行它时,javascript 崩溃了

未捕获的引用错误:无法处理绑定"foreach: 函数 (({返回购物车项目数组 }"消息:无法处理绑定"文本:函数 (({返回日期时间 }"消息:未定义日期时间

当我将数据绑定="文本:

日期时间"更改为数据绑定="文本:购物车项目">

它给了我:

[[{"datetime":"2016-02-17 14:31:34","id":"749","typeid":"13","qty":1}]

,[{"datetime":"2016-02-17 14:59:26","id":"756","typeid":"13","qty":1}]][[{"datetime":"2016-02-17 14:31:34","id":"749","typeid":"13","qty":1}],[{"datetime":"2016-02-17 14:59:26","id":"756","typeid":"13","qty":1}]][[{"datetime":"2016-02-17 14:31:34","id":"749","typeid":"13","qty":1}],...

(多次(

任何帮助将不胜感激!

所以答案很简单,因为我在推送到数组的项目上有额外的括号:

 var newItem = [{ datetime: datetime, id: id, typeid: typeid, qty: 1}];

需要是

 var newItem = {datetime: datetime, id: id, typeid: typeid, qty: 1};