CODEWITHSUNDEEP
javascriptbackbone.jsattributesunderscore.js
FLuttenb
FLuttenb

Reputation: 163

Variable in Backbone.js view attributes

I'm trying to achieve to render a block of HTML by using a model's attribute as a variable in a view.

App = Backbone.Model.extend({
        contentType: "text"
        });

AppView = Backbone.View.extend({
        ContentTpl: _.template( $('#slide-'+this.model.get('contentType')).html() ),

        render: function(){
             $('#wrapper').html( this.ContentTpl() );    
        }
        });

var app = new App();
var appView = new AppView({model: app});
appView.render();

HTML:

<div id="wrapper">
</div>

<script type="text/template" id="slide-text">
   <p>This is a test</p>
</scrip>

But this results in an error...

Upvotes: 0

Views: 1050

Answers (2)

Yurui Zhang
Yurui Zhang

Reputation: 2232

You defined your view wrong.

you have 

AppView = Backbone.Model.extend({

it should be

AppView = Backbone.View.extend({

and, you cannot evaluate this.model before view is initialized, do the following instead: 

ContentTpl: function() {
   return _.template( $('#slide-'+ this.model.contentType).html() );
},

and , contentType is not a model attribute, it's an attribute on the model object, you cannot use get().

to define it as a model attribute you have to either define it as a default value in the model, or pass it when you instantiate an object:

var app = new App({contentType: 'text'});

or 

App = Backbone.Model.extend({
  defaults: {
     "contentType": "text"
  }
});

Upvotes: 2

Daniel A. White
Daniel A. White

Reputation: 190905

You have to load your template in the initialize function. this.model doesn't exist at that point.

initialize: function() {
    this.ContentTpl = _.template( $('#slide-'+this.model.get('contentType')).html() );
}

However, this is still a bad pattern form backbone. I would inject it as an option.

var template = $('#slide-'+this.model.get('contentType')).html();
var appView = new AppView({model: app, ContentTpl: template });
...

// in your view
initialize: function(options) {
    this.ContentTpl = _.template( options.ContentTpl );
}

Upvotes: 1

Related Questions