Question

我目前正在尝试在父视图中呈现子视图，如下所示：

var ParentView = Backbone.View.extend({

    initialize: function(){
        this.render();
        this.childView = new ChildView({el: '#id1', model: this.model.get('collection').at(index)});
    },

    render: function(){
        this.$el.html(ich.parent_template(this.model.toJSON()));
    }
}):

父模板非常简单，类似于：

<script id="parent_view" type="text/html">
<div>
    <h1 class="section-title">{{ title }}</h1>
     <div id="id1"></div>
</div>
</script>

我想像这样呈现childView：

var ChildView = Backbone.View.extend({

    initialize: function(){
        this.render();
    },

    render: function(){
        this.$el.html(ich.child_template(this.model.toJSON()));
    }
}):

但什么时候没有出现。如果我在不包含{el：'＃id1'}的情况下实例化子视图，然后将其从父视图渲染到正确的div中，则一切正常。我只是更加困惑为什么它不会按照我上面概述的方式工作。

我是否完全误解了指定子视图的内容？我试图关注this response，但它根本不适合我。

Answer 1

您知道按时初始化您的template尚未加载。它没有被创建，所以Parent View没有找到'＃id1'元素。仅在render之后您可以像这样致电childView：

render: function(){
    this.$el.html(ich.parent_template(this.model.toJSON()));
    this.childView = new ChildView({el: '#id1', model: this.model.get('collection').at(index)});
}

Answer 2

确定，

我刚刚在jsFiddle上做过这个测试，除非您的模型绑定存在问题，否则它工作正常..这是链接....

http://jsfiddle.net/Tn8PX/1/

或

http://jsfiddle.net/Tn8PX/2/

或代码如下

<div>
     <h1>Parent Child example</h1>

    <div id="container">a</div>
</div>

<script type="text/template" id="parent_template">
    <div> <h1> Parent Heading </h1>
     <div id="child"></div> </div>
</script>

<script id="child_template" type="text/html">
    <div> <h1> Child Heading </h1>
     <div >Child Content</div> </div>
</script>



    ParentView = Backbone.View.extend({
        initialize: function () {
            this.render();
            var child_view = new ChildView({
                el: $("#child")
            });
        },
        render: function () {
            var template = _.template($("#parent_template").html(), {});
            this.el.html(template);
        }
    });

    ChildView = Backbone.View.extend({
        initialize: function () {
            this.render();
        },
        render: function () {
            var template = _.template($("#child_template").html(), {});
            this.el.html(template);
        }
    })

    var parent_view = new ParentView({
        el: $("#container")
    });

通过将指定的el传递到子视图实例，将视图渲染到父div中

2 个答案: