json - json数据的淘汰模板解析不起作用

Question

请检查此链接是否无效，我不知道我的代码有什么问题。我正在尝试创建一个包含标题、描述和评论的博客应用程序，但我没有得到正确的输出。

<h4>Title</h4>
<label data-bind="value: title" />
<h4>Description</h4>
<label data-bind="value: description" />
<h4>Comments</h4>
<p data-bind="foreach: comments">
    <label data-bind="value: commenter" /><br>
    <label data-bind="value: comment" /><br>
</p>​


var data = {"title": "blog1",
                "description": "Description1",
                "comments": [{"commenter": "commenter1", "comment": "comment1"},
                             {"commenter": "commenter2", "comment": "comment2"},
                             {"commenter": "commenter3", "comment": "comment3"},
                             {"commenter": "commenter4", "comment": "comment4"}]};
    function Comment(data) {
        this.commenter = ko.observable(data.commenter);
        this.comment = ko.observable(data.comment);
    }
    function BlogViewModel(data) {
        var self = data;
        self.title = data.title;
        self.description = data.description;
        self.comments = ko.observableArray(ko.utils.arrayMap(data.comments, function (com) {
            return new Comment(com.commenter, com.comment);
        }));
    }
    ko.applyBindings(new BlogViewModel(data));
​

Answer 1

您的代码有多个问题，有些与 KnockOut 有关，有些与 KnockOut 无关：

与KO无关的：

• 在变量中不应该包含BlogViewModel参数：所以它应该是selfthisdatavar self = this;
• 您的评论映射错误：new Comment(com.commenter, com.comment)应该是new Comment(com)

与KO相关的有：

• value绑定用于元素，您有标签，input因此您需要使用文本绑定。例如data-bind="text: title"
• KO 需要有效的 html。因为自闭合label标签无效，您需要将闭合标签添加到标签中，例如<label data-bind="text: description"></label>

这是一个包含所有修复程序的工作JSFiddle 。