与 Knockout JS 的数据绑定不起作用答案

【问题标题】：Databinding with Knockout JS not working与 Knockout JS 的数据绑定不起作用
【发布时间】：2015-12-03 21:36:29
【问题描述】：

我正在尝试将我的 JSON 对象绑定到 HTML div，但似乎没有一个绑定有效。这是我目前对该主题的尝试。但我已经尝试过使用模板绑定。这导致了一个未定义的错误，但该对象已正确加载，因为我总是在控制台中获取它。

$(document).ready(function () {
var submissionViewModel = new SubmissionModel();
submissionViewModel.getSubmission().done(function () {
    ko.applyBindings(submissionViewModel, document.getElementById("submission"));
})
});

var SubmissionModel = function () {
var self = this;
//self.loading = ko.observableArray();
self.Submission = ko.observable(null);

self.getSubmission = function () {
    // Let loading indicator know that there's a new loading task that ought to complete
    //self.loading.push(true);

    return $.getJSON('/Submission/GetSubmission',
        function (data) {
            console.log("submission loading")
            console.dir(data);

            self.Submission = ko.mapping.fromJSON(JSON.stringify(data));
        }
    );
}
}

HTML

<div id="submission" data-bind="with: Submission">
<span data-bind="text: SubmissionTitle"></span>
</div>

JSON

"{"
SubmissionID":"1be87a85-6d95-43aa-ad3c-ffa047b759a5",
"SubmissionTitle":"nog wat sliden",
"SubmissionDescription":"////",
"SubmissionFile":"TESTFILE  ",
"CreatedOn":"2015-09-02T21:10:54.913",
"SubmissionPoolID":"5af408f5-515c-4994-88dd-dbb2e4a242a2",
"SubmissionTypeID":1,
"CreatedBy":"a028a47d-3104-4ea4-8fa6-7abbb2d69bbd
"}"

我这几天一直在研究这个问题，但我似乎无法让它发挥作用。你们中有人能指出我正确的方向吗？

【问题讨论】：

你能在帖子中添加示例 json 回复吗？实际上由于系统的访问限制，我无法从链接中看到数据。
我已将 json 添加到评论中
$.getJSON 返回 json 对象。所以你可以做self.Submission(ko.mapping.fromJSON(data));

标签： javascript jquery json knockout.js

【解决方案1】：

在 java-script 中解码字符串内的对象，您需要使用 JSON.parse 并确保您的对象是 not 以这种方式构造的 双引号内的双引号。

视图模型：

var json = '{"SubmissionID":"1be87a85-6d95-43aa-ad3c-ffa047b759a5","SubmissionTitle":"nogwatsliden","SubmissionDescription":"--","SubmissionFile":"TESTFILE  ","CreatedOn":"2015-09-02T21:10:54.913","SubmissionPoolID":"5af408f5-515c-4994-88dd-dbb2e4a242a2","SubmissionTypeID":1,"CreatedBy":"a028a47d-3104-4ea48fa67abbb2d69bbd"}'
var ViewModel = function () {
    this.Submission = ko.observable();
    this.Submission(ko.mapping.fromJS(JSON.parse(json)));
    //you can also use ko.mapping.fromJSON(json) as jeroen pointed out   
};
ko.applyBindings(new ViewModel());

工作示例here

【讨论】：

你的解决方案给了我 Uncaught ReferenceError: json is not defined
json 在您成功的情况下只不过是data。我刚刚声明了 var json ="//your json"
为什么JSON.parse？这里this.Submission(ko.mapping.fromJSON(json)); works fine too...（而且更简洁一些）
哦，是的，你是对的。我使用了fromJS，所以我使用了parse 艰难的fromJSON 做到了这一点（更简洁），我将把它添加到我的答案中。欢呼
更简洁，想想它对没有JSON.parse的浏览器也有更好的向后兼容性。