CODEWITHSUNDEEP
javascriptjquerybackbone.js
Scott101
Scott101

Reputation: 138

Rendering view into parent div by passing specified el into child view instaniation

I am currently trying to render a child view in a parent view like so:

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()));
    }
}):

The parent template is fairly simple, something along the lines of:

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

I wanted to render the childView like so:

var ChildView = Backbone.View.extend({

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

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

but when do this nothing appears. Everything works fine if I instantiate the child view without including the {el: '#id1'}, and then render it into the correct div from the parent view. I am just more confused about why it wouldn't work in the way I outlined above.

Am I totally misunderstanding what specifying the el of the child view does? I was trying to follow this response but it was not working for me at all.

Upvotes: 2

Views: 555

Answers (2)

Ulug&#39;bek
Ulug&#39;bek

Reputation: 2832

You know on time initialize your template was not be loaded yet. it was not have been created, so Parent View didn't find element by '#id1'. Only after render You can call childView like this:

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

Upvotes: 3

addisu
addisu

Reputation: 634

Ok,

I just did this test on jsFiddle and unless there is an issue with your model binding, it is working fine .. Here is the link ....

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

or

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

OR the code as follows

<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")
    });

Upvotes: 1

Related Questions