passing model object to view in backbone

Question

I have been trying to pass a model object to be evaluated in my template but had no luck. I tried the following but had no luck

dashboardmodel.js

var myMod = Backbone.Model.extend({
   defaults: {
     name: "mo",
     age: "10"
   }
});

myview.js

         var dashView = Backbone.View.extend({

         el: '.content-area',

         this.mymodel = new myMod({}), 

         template: _.template(dashBoardTemplate, this.mymodel),
         initialize: function() {
                    },

                    render: function() {
                        this.$el.html(this.template);
                        return this;
                    }

// more javascript code.............

dahboard.html

<p> Hello <%= name %> </p>

PS: I am using the underscore template engine

Just edit your template to make it cachable and in your render function pass model.toJSON() or model.attributes, do not pass model itself. BACKBONE DOCS — KiT O
– KiT O, Commented Oct 26, 2013 at 20:25

chfw · Accepted Answer · 2013-10-26 18:00:54Z

In addition , your way to pass a model to a view is not flexible, because you would pass an instance of your model, instead of a default model. Thus, you might want to single out

this.mymodel = new myMod({}),

(btw, above line gives me error message in my chrome browser because of "=" sign)

Then, suppose you have an instance A:

A = new myMod({"name": "World", "age":100})

Then pass it to your view as:

myview = new dashView({mymodel: A})

One more step, you have to do is to call render function:

myview.render();

Here's a complete solution:

<html>
<script src="jquery-1.10.2.min.js"></script>
<script src="underscore-min.js"></script>
<script src="backbone.js"></script>
<body>
<script type="text/template" id="dashBoardTemplate">
<p> Hello <%= name %> </p>
</script>
<div class="content-area">
</div>
<script type="text/javascript">
var myMod = Backbone.Model.extend({
   defaults: {
     name: "mo",
     age: "10"
   }
});

var dashView = Backbone.View.extend({
    el: '.content-area',
    template: _.template($("#dashBoardTemplate").html()),
    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});
mymod = new myMod({"name": "World", "age":100});
myview = new dashView({model:mymod});  
myview.render();
</script>
</body>
</html>

If you want to study backone.js, please read this open source book which get me started:

http://addyosmani.github.io/backbone-fundamentals/

tanguy_k · Accepted Answer · 2019-02-11 10:10:57Z

3

You need to get properties of a Backbone Model with the getter syntax, so you need to rewrite your template to:

<p> Hello <%= obj.get('name') %> </p>

Or you need to convert your model into a plain JS object when calling _.template what you can do with the .toJSON() (which creates a clone of the model) or .attributes property:

template: _.template(dashBoardTemplate, this.mymodel.toJSON())

Side note: you should consider to move the template rendering logic into your view. Because your current code render your template when your view is declared and not when you call the render method. So you might get unexpected result. So your code you look like this:

template: _.template(dashBoardTemplate), //only compile the template
render: function() {
    this.$el.html(this.template(this.mymodel.toJSON()));
    return this;
}

edited Feb 11, 2019 at 10:10

tanguy_k

12.5k6 gold badges64 silver badges65 bronze badges

answered Oct 26, 2013 at 17:41

nemesv

140k16 gold badges424 silver badges364 bronze badges

1 Comment

tawheed Over a year ago

This is awesome! Thanks the second approach worked like charm

Collectives™ on Stack Overflow

passing model object to view in backbone

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related