Backbone - View not rendering - javascript

I'm new to backbone and trying to make a book library app. While running this code, it is not showing the template.
This is my index.html
<html>
<head>
<title>Example</title>
</head>
<body>
<form>
Name:<input type='text' id='name'/><br>
Author:<input type='text' id='auth'/><br>
Keyword:<input type='text' id='keyword'/><br><br>
<button id="add">Add</button>
</form>
<div id='book_list'>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.io/backbone/backbone-min.js"></script>
<script src="script.js"></script>
<script id="bookTemplate" type="text/template">
<ul>
<li><%= name %></li>
<li><%= auth %></li>
<li><%= keyword %></li>
</ul>
<button class="delete">Delete</button>
</script>
</body>
</html>
This is script.js
$(function(){
var bookmodel = Backbone.Model.extend({
defaults: {
name:'temp',
auth:'meee',
keyword:'nonee'
},
});
var booklist = Backbone.Collection.extend({
model:bookmodel
});
var bookview= Backbone.View.extend({
tagName:'div',
className: 'bookContainer',
template: _.template( $('#bookTemplate').html()),
events:{
'click .delete':'deleteBook'
},
render : function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
},
deleteBook: function(){
this.model.destroy();
this.remove();
}
});
var library = Backbone.View.extend({
model: bookmodel,
initialize: function( initialBooks ) {
$el='#book_list';
var one=new bookmodel({name:'ankur 1',auth:'asdf 1',keyword:'asdfkasdf 1'});
var two=new bookmodel({name:'ankur 2',auth:'asdf 2',keyword:'asdfkasdf 2'});
var bookcoll= [one,two];
this.collection = new booklist(bookcoll);
this.render();
},
render:function(){
this.collection.each(function (item){
var k= new bookview({model:item});
this.$el.append(k.render().el);
},this);
},
});
var xyz= new library();
})
Also, when i'm trying to code like this:
var library = Backbone.View.extend({
model: bookmodel,
$el:'#book_list';
..... //rest of the code
)};
var xyz= new library();
Then,it is leading to : Uncaught TypeError: undefined is not a function, at line
var xyz= new library();

I ran your code and it seemed fine. I dont know exactly whats in script.js but try including your template above your script.js file. It probably can't find your template at the point it was running

I was able to recreate your error in jsfiddle by using their underscore library backbone loader. It wasn't an issue with your code. The following fiddle shows your same error:
http://jsfiddle.net/32tsA/
While this one works fine:
http://jsfiddle.net/BympL/
The issue was with how you had the fiddle set up in my estimation.
I did make some minor changes to fix up capitalization and some best practices with Backbone:
var Bookmodel = Backbone.Model.extend({
defaults: {
name:'temp',
auth:'meee',
keyword:'nonee'
}
});
var Booklist = Backbone.Collection.extend({
model: Bookmodel
});
var Bookview = Backbone.View.extend({
tagName:'div',
className: 'bookContainer',
template: _.template( $('#bookTemplate').html()),
events:{
'click .delete':'deleteBook'
},
render : function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
},
deleteBook: function(){
this.model.destroy();
this.remove();
}
});
var one=new Bookmodel({name:'ankur 1',auth:'asdf 1',keyword:'asdfkasdf 1'});
var two=new Bookmodel({name:'ankur 2',auth:'asdf 2',keyword:'asdfkasdf 2'});
var bookcoll = [one,two];
var mybooks = new Booklist(bookcoll);
var Library = Backbone.View.extend({
render:function(){
this.collection.each(function (item){
var k= new Bookview({model:item});
this.$el.append(k.render().el);
},this);
},
});
var xyz = new Library({collection: mybooks, el: "#book_list"});
xyz.render();
I named the classes with capital case, removed the initialization of the models from your view (views should be told their models not create their models), and abstracted the el declaration from the Library declaration (so you can reuse the view in a different place).

Related

Backbone getting model for a clicked element

Say I have a collection of sportsmen. I juste display their names and when there's a click on a name, I'd like to dislay some more details. But that implies I have to retrieve the associate model.
So I have a model, a collection and then two views, one that takes care of rendering each individual name, and the other one manages the list of those names. And then I'll have to create a view to display the details of the clicked sportsman.
But I can't figure out how to retrive the associate model. If I place my event in the view that manages the list, it triggers on click but there's an error saying that the model is undefined.
And if the event listener is located in the view that renders each individual name, it doesn't do anything on click.
Here's my code :
Index.html
<script id="nameListTemplate" type="text/template">
<%= first %> <%= last %>
</script>
<script id="contactTemplate" type="text/template">
<ul>
<li><%= first %></li>
<li><%= last %></li>
<li><%= age %></li>
<li><%= sport %></li>
<li><%= category %></li>
</ul>
</script>
<script src="js/lib/jquery.min.js"></script>
<script src="js/lib/underscore-min.js"></script>
<script src="js/lib/backbone-min.js"></script>
<script src="js/models/sportsManModel.js"></script>
<script src="js/collections/sportsMenCollection.js"></script>
<script src="js/views/nameView.js"></script>
<script src="js/views/nameListView.js"></script>
<script src="js/app.js"></script>
<ul id="sportsMenName"></ul>
<div id="sportsManDetails"></div>
sportsManModel.js
var app = app || {};
app.SportsManModel = Backbone.Model.extend({});
sportsMenCollection.js
var app = app || {};
app.SportsMenCollection = Backbone.Collection.extend({
model: app.SportsManModel
});
nameView.js
var app = app || {};
app.NameView = Backbone.View.extend({
tagName: 'li',
className: 'sportsMan',
template: _.template($('#nameListTemplate').html()),
/*events: {
'click .sportsMan': 'showSportsManDetails'
},
// here it doesn't work at all
showSportsManDetails: function(e){
alert(this.model.get('first'));
},*/
render: function(){
this.$el.append(this.template(this.model.attributes));
return this;
}
});
nameListView.js
var app = app || {};
app.NameListView = Backbone.View.extend({
el: '#sportsMenName',
initialize: function(sportsMen){
this.collection = new app.SportsMenCollection(sportsMen);
this.render();
},
/*events: {
'click .sportsMan': 'showSportsManDetails'
},
// here it says that this.model is undefined
showSportsManDetails: function(e){
alert(this.model.get('first'));
},*/
render: function(){
this.collection.each(function(sportsMen){
this.renderContact(sportsMen);
}, this)
},
renderContact: function(sportsMen){
var nameView = new app.NameView({
model: sportsMen
});
this.$el.append(nameView.render().el);
}
});
The first problem is that you have a view for li.sportsMen element so you don't need to use class .sportsMen in events at all.
And second problem you had wrong method name for click event showSportsManDetails but should be showContactDetail as you have showContactDetail method or rename method name to showSportsManDetails instead.
app.NameView = Backbone.View.extend({
...
events: {
'click': 'showSportsManDetails'
},
showSportsManDetails: function(e){
alert(this.model.get('first'));
},
Here is a working example http://jsbin.com/yutaduvokehu/1/edit
i think the problem may be with the scope , try adding this initalize function in nameView :
initailize : function(){
_.bindAll(this,'showContactDetail');
}

Backbone.Marionette - view is not rendering properly

I am doing a sample work to render the element using the data. but I am not getting my result. what is wrong here?
any one help me?
here is my code: please go for fiddle for the live demo.
html:
<div id="content" class="content"></div>
<script type="text/template" id="list">
<%= name %>
</script>
Javascript:
var data = [
{"name":"name1","city":"city1","age":"age1","subModel":[
{"name":"name01","city":"city01","age":"age01","subModel":[
{"name":"name001","city":"city001","age":"age001"}
]},
{"name":"name02","city":"city02","age":"age02","subModel":[
{"name":"name002","city":"city002","age":"age002"}
]},
{"name":"name03","city":"city03","age":"age03","subModel":[
{"name":"name003","city":"city003","age":"age003"}
]}
]}
];
var myApp = new Backbone.Marionette.Application();
myApp.addRegions({
mainRegion:"#content"
});
var myModel = Backbone.Model.extend({
defaults:{
"name":"no name",
"city":"chennai",
"age":"10 months"
}
});
var myCollection = Backbone.Collection.extend({
model:myModel
});
var oneView = Backbone.Marionette.ItemView.extend({
tagName:"li",
template:"#list"
});
var multiView = Backbone.Marionette.CompositeView.extend({
tagName:'ul',
itemView:oneView
});
myApp.on('initialize:after', function(){
var listView = new multiView({collection:data});
myApp.mainRegion.show(listView);
});
myApp.start();
Live Demo
Here you go: http://jsfiddle.net/Cardiff/Y5kwM/
There are several errors here:
var multiView = Backbone.Marionette.CompositeView.extend({
tagName:'ul',
itemView:oneView
});
You need to provide a template to a compositeView, otherwise use a collectionview.
var listView = new multiView({collection:data});
You can't just set an array as a collection. You need a valid backbone collection (see fiddle).

backbone collection. fetch() not rendering the view in mozilla

i am trying to learn backbone.js ( Backbone.js 1.0.0) this is my sample html page where iam using collection. fetch() method to get the collection,and it is displayed using view .i am getting result in
google chrome,but nothing is displayed in mozilla. i don't know the exact reason.
while i refere to backone site http://backbonejs.org/#Collection-fetch
it is qouted that :
Note that fetch should not be used to populate collections on page load — all models needed at load time should already be bootstrapped in to place. fetch is intended for lazily-loading models for interfaces that are not needed immediately: for example, documents with collections of notes that may be toggled open and closed.
is this is related with my issue?
this is my sample html page
<!DOCTYPE html>
<html>
<head>
<title>Backbone Application</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/underscore.js" type="text/javascript"></script>
<script src="js/backbone.js" type="text/javascript"></script>
</head>
<body>
<div class="list"></div>
<script id="personTemplate" type="text/template">
<td> <strong><%= name %></strong></td>
<td>(<%= age %>) </td>
<td> <%= occupation %> </td>
</script>
<script type="text/javascript">
//Person Model
var Person = Backbone.Model.extend({
defaults: {
name: 'Guest User',
age: 30,
occupation: 'worker'
}
});
// A List of People
var PeopleCollection = Backbone.Collection.extend({
model: Person,
initialize: function(){
alert("intialise")
},
url:'/RestFul/rest/members/info',
});
// View for all people
var PeopleView = Backbone.View.extend({
tagName: 'table',
render: function(){
this.collection.each(function(person){
var personView = new PersonView({ model: person });
this.$el.append(personView.render().el); // calling render method manually..
}, this);
return this; // returning this for chaining..
}
});
// The View for a Person
var PersonView = Backbone.View.extend({
tagName: 'tr',
template: _.template($('#personTemplate').html()),
////////// initialize function is gone from there. So we need to call render method manually now..
render: function(){
this.$el.html( this.template(this.model.toJSON()));
return this; // returning this from render method..
}
});
var peopleCollection = new PeopleCollection();
//peopleCollection.fetch();
peopleCollection.fetch({ success: function () { console.log("collection fetched"); } });
//peopleCollection.fetch({context:collection}).done(function() {
// console.log(this.length)
// })
//console.log(peopleCollection.toJSON())
alert(JSON.stringify(peopleCollection));
var peopleView = new PeopleView({ collection: peopleCollection });
$(document.body).append(peopleView.render().el); // adding people view in DOM
</script>
</body>
</html>
any help will be appreciated
Try with
var fetching = peopleCollection.fetch({ success: function () { console.log("collection fetched"); } });
$.when(fetching).done(function(){
var peopleView = new PeopleView({ collection: peopleCollection });
$(document.body).append(peopleView.render().el); // adding people view in DOM
});
var fetching = peopleCollection.fetch({ success: function () {
var peopleView = new PeopleView({ collection: peopleCollection });
$(document.body).append(peopleView.render().el);
} });
I think we can call the view render inside the success callback

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

passing model object to view in backbone

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

Categories

Resources