0

「投稿」、「コメント」、「新しいコメントの追加」の 3 つのビュー テンプレートがあります。メインのテンプレートは「投稿」です。「コメント」と「新しいコメントを追加」テンプレートを「投稿」テンプレートの div に配置する方法を見つける必要があります。または、この構造を作成する他の方法:

    - 役職
        - コメント
        - 新しい投稿フォームを追加
    - 役職
    ...

Facebookの壁に似ています

バックボーンの Javascript:

// Post View
var PostView = Backbone.View.extend({
    template: $("#post").html(),
    ...
    render: function () {
        var tmpl = _.template(this.template);
        var thisPost = this.model.toJSON();
        this.$el.html(tmpl(thisPost));
    }
});
var postView = new PostView();
postView.render();

// Comments List
var CommentsListView = Backbone.View.extend({
    el: '#comments', // how to place it to #comments div in "post" template? This line doesn't work
    ...
    addNewCommentForm: function (post_id) {
        var tmpl = _.template($("#addCommentTemplate").html());
        this.$('#addNewComment').append(tmpl()); // How to place it to #addNewComment div in "post" template? This line doesn't work
    }
});

HTML:

<script id="post" type="text/template">
    <%= text %>
    <div id='comments'>...</div>
    <div id='addNewComment'>...</div>
</script>
4

1 に答える 1

1

コードには多くの問題があります。PostView.el1つ目は、実際にはDOMに入れていないということです。を介しPostView.render()て、データを入力PostView.$elし、その後PostView.elに入力しますが、実際にはページ（DOM）に配置していません。さらに、をelオンCommentsListViewに設定すると、実際には何もしません。を既存の要素に設定する場合はel、次のようにしますel: $('#comments')。または、動的にレンダリングCommentsListViewしてDOMに挿入する場合は、次のようにidプロパティを定義して、要素に「comments」のIDを設定しますid: 'comments'。これらは、コードに関する2つの最も明白な問題です。ここで実行されている半実用的な例を取得しました：http://codepen.io/jayd3e/pen/hAEDv。

于 2012-12-29T15:05:48.173 に答える