将嵌套的 JSON 绑定到 Knockout 视图模型答案

【问题标题】：Binding nested JSON to Knockout View Model将嵌套的 JSON 绑定到 Knockout 视图模型
【发布时间】：2014-07-31 06:56:06
【问题描述】：

我正在尝试从表示二维数组的 JSON 字符串绑定 KnockoutJS 视图模型。但是我遇到了一个问题，即只显示数组的第一级。

我的模型如下所示：

function CategoriesModel(categories) {
    var self = this;

    self.categories = ko.observableArray(ko.utils.arrayMap(categories, function (category) {
        return {
            description: category.description,
            checks: ko.observableArray(category.checks)
        };
    }));

    self.addCategory = function () {
        self.categories.push({
            description: "",
            checks: ko.observableArray()
        });
    };

    self.removeCategory = function (category) {
        self.categories.remove(category);
    };

    self.addCheck = function (category) {
        category.checks.push({
            description: "",
            keypoint: "",
            penaltypoints: ""
        });
    };

    self.removeCheck = function (check) {
        $.each(self.categories(), function () {
            this.checks.remove(check)
        });
    };

    self.save = function () {
        self.lastSavedJson(JSON.stringify(ko.toJS(self.categories), null, 2));
    };

    self.lastSavedJson = ko.observable("");
};

我尝试绑定 JSON 数据的方法是：

function loadData() {
    var rawJSON = '[
        {
            "description":"01", 
            "checks":{"
                    description":"01", 
                    "keypoint":"01", 
                    "penaltypoints":"01"
            }
        },{
            "description":"02", 
            "checks":{
                    "description":"02", 
                    "keypoint":"02", 
                    "penaltypoints":"02"
            }
        }
    ]';

    var parsedJSON = JSON.parse(rawJSON);

    viewModel.categories = ko.mapping.fromJSON(rawJSON);

    ko.applyBindings(viewModel);
}

谁能告诉我我的错误是什么？任何帮助将不胜感激。

编辑：我尝试创建一个 jsfiddle (http://jsfiddle.net/EAu2E/4/)，但似乎 knockout.js 和 knockout-mapping.js 资源没有正确加载。

【问题讨论】：

我已经更新了你的小提琴请看更新的jsfiddle.net/EAu2E/7
既然可以直接从 JS 对象映射，为什么还要从 JSON 映射？
@haim770 因为服务器会返回一个 JSON 字符串，最终...

标签： javascript json knockout.js

【解决方案1】：

问题出在 JSON 字符串中。尽管http://jsonlint.com 将下面的字符串显示为有效：

var rawJSON = '[
    {
        "description":"01", 
        "checks":{"
                description":"01", 
                "keypoint":"01", 
                "penaltypoints":"01"
        }
    },{
        "description":"02", 
        "checks":{
                "description":"02", 
                "keypoint":"02", 
                "penaltypoints":"02"
        }
    }
]';

Knockout JS 期望嵌套列表周围有方括号（这也是有效的 JSON），如下所示：

var rawJSON = '[
    {
        "description":"01", 
        "checks":[{"  //<----- Square bracket required here.
                description":"01", 
                "keypoint":"01", 
                "penaltypoints":"01"
        }]  //<----- Square bracket required here.
    },{
        "description":"02", 
        "checks":[{  //<----- Square bracket required here.
                "description":"02", 
                "keypoint":"02", 
                "penaltypoints":"02"
        }]  //<------ Square bracket required here.
    }
]';

【讨论】：