passing model object to view in backbone

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/


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

Tags:

Javascript

Backbone.Js

Recent Posts