0

このリンクが機能していないことを確認してください。コードの何が問題なのかわかりません。タイトル、説明、コメントを含むブログ アプリケーションを作成しようとしていますが、適切な出力が得られません。

<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));
​
4

1 に答える 1

1

コードに複数の問題があります。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です。

于 2012-10-29T10:04:16.290 に答える