javascript - 通过将指定的 el 传递给子视图实例化将视图渲染到父 div

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 中，则一切正常。我只是对为什么它不能以我上面概述的方式工作感到更加困惑。

我是否完全误解了指定子视图的 el 的作用？我试图遵循这个回应，但它根本不适合我。

Answer 1

你知道按时初始化你template还没有被加载。它没有被创建，所以父视图没有找到'#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")
    });