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

【问题标题】：How to populate KO binded list with items from a cookie array如何使用 cookie 数组中的项目填充 KO 绑定列表
【发布时间】：2016-05-29 09:03:11
【问题描述】：

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

但是KO好像没有理解cookie中的数组是数组，也没有遍历table上的数组。

当用户点击“添加到购物车”按钮时，会发生这种情况：

$("#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 崩溃了

未捕获的 ReferenceError: 无法处理绑定“foreach: function (){return cartItemArray }” 消息：无法处理绑定“文本：函数（）{返回日期时间}” 消息：日期时间未定义

当我将 data-bind="text: datetime" 更改为 data-bind="text: cartItems"

它给了我：

[[{"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}], ...

（多次）

非常感谢任何帮助！

【问题讨论】：

首先，您不应该在视图模型代码中使用 jQuery 选择器。（您的视图模型代码是不是绑定处理程序的所有内容。）使用 Knockout 绑定。接下来，看起来您的数组是一个数组对象数组，并且您将其视为对象数组。
我现在看到我删除了推送的额外括号 var newItem = { datetime: datetime, id: id, typeid: typeid, qty: 1 };
看了你的代码我的眼睛都疼了……你有 KO 却使用 99.9% 的 jQuery 代码？哥们！！！你刚买了一辆法拉利，但你前面有几匹马，因为它像一辆旧马车一样拉着它……

标签： javascript json cookies knockout.js

【解决方案1】：

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

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

需要

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

【讨论】：