I'm trying to create a simple hello world with backbone and firebase(using backfire). The code is working to insert data to firebase, but when I try to get data and fill the template, it says "Uncaught ReferenceError: firstName is not defined". On debug I can see the object with the data but I don't know how to provide the template with this object.
Here is the code:
$(document).ready(function(){
var registerModel = Backbone.Model.extend({
defaults: {
firstName: '',
lastName: ''
}
});
var registerColletion = Backbone.Firebase.Collection.extend({
model:registerModel,
firebase: new Firebase("https://XXXXXXXX.firebaseio.com/")
});
var registerView = Backbone.View.extend({
el: $("#myTest"),
itemTemplate: _.template($('#item-template').html()),
events: {
"click #btnSave": "saveToFirebase"
},
initialize: function () {
this.listenTo(registerList, 'add', this.render);
},
render: function(){
$('#divContent').html(this.itemTemplate(this.model.toJSON()));
},
saveToFirebase: function () {
registerList.add({firstName: $("#txtFirstName").val(), lastName: $("#txtLastName").val()});
}
});
var registerList = new registerColletion;
var app = new registerView({model:registerList});
});
The exact point of the exception is on render function:
render: function(){
$('#divContent').html(this.itemTemplate(this.model.toJSON()));
},
The template:
<script type="text/template" id="item-template">
<div class="view">
<p>
<%- firstName %> <%- lastName %>
</p>
</div>
</script>
Can anyone please help me? I think I'm missing something (probably obvious) but I can't see it.
Thank you!
When you create the registerView you're telling it that the underlying model is a registerList (not a registerModel)
var app = new registerView({model:registerList});
Therefore, when the render function is called, it's looking for the firstName property of a registerList, and that property doesn't exist.
Seems like you've got Models and Collections mixed up
Related
Ive created a simple backbone app that gets data from MySQL database about users to display in a view called LeaderBoardView.
Below is the HTML code for the view,
<body>
<div id="container"></div>
<h1>Leaderboard</h1>
<table class="table" id="modtable">
<tr>
<th>Username</th>
<th>Level</th>
</tr>
</table>
<div id="bbcontent"></div>
Im trying to get data and populate inside the div with bbcontent as the id.
Below is my Backbone model, collection and view,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-
min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js">
</script>
<script language="javascript">
$(document).ready(function() {
alert("heyyyyyy")
//model
var User = Backbone.Model.extend({
idAttribute: "userId",
defaults: {
username: null,
userLevel: null
}
});
//collection
var Users = Backbone.Collection.extend({
model: User,
url: "/CW2/ASSWDCW2/cw2app/index.php/Leaderboard/leaderboard",
});
var usersC = new Users();
var LeaderboardDeetsView = Backbone.View.extend({
model: usersC,
el: $('#bbcontent'),
intialize: function() {
alert("asndasnxdjksa")
usersC.fetch({
async: false
})
this.render()
},
render: function() {
var self = this;
usersC.each(function(c) {
var block = "<div class='name'><h1>" + c.get('username') + "</h1></div>"
self.$el.append(block)
})
}
})
var leaderboardDeetsView = new LeaderboardDeetsView();
});
Problem with this code :
The LeaderboardDeetsView isn't being called hence the collection fetch function inside the initialize function of the LeaderboardDeetsView isn't being called.How can I correct my code? Please help
I need help with my code, I'm trying to learn Backbone for my Social Project. I'm trying to render a view from a collection that I got from an API (deployd API)
Here is the HTML code for the table:
<div class="container-fluid">
<table id= "teachers">
<thead>
<tr>
<th>Name</th>
<th>Last Name</th>
<th>Code</th>
<th>Last time online</th>
</tr>
</thead>
<tbody id="table-body"></tbody>
</table>
</div>
<script type="text/template" id="teacher-template">
<td><%= name %></td>
<td><%= lastname %></td>
<td><%= code %></td>
<td><%= lastactivity %></td>
</script>
Here is the JS code:
var TeacherModel = Backbone.Model.extend({
defaults: {
id:'',
name: '',
lastname: '',
code: '',
lastactivity: ''
}
});
var TeacherCollection = Backbone.Collection.extend({
url: "/teachers",
model: TeacherModel
});
var teachercollection = new TeacherCollection();
teachercollection.url = '/teachers';
teachercollection.fetch({
success: function(collection, response) {
console.log("Done!!");
}, error: function(collection, response) {
alert(response);
}
});
var TeachersView = Backbone.View.extend({
el: '#table-body',
initialize: function() {
this.render();
},
render: function() {
this.$el.html('');
teachercollection.each(function(model) {
var teacher = new TeacherView({
model: model
});
this.$el.append(teacher.render().el);
}.bind(this));
return this;
}
});
var TeacherView = Backbone.View.extend({
tagName: 'tr',
template: _.template($('#teacher-template').html()),
render: function() {
this.$el.html(this.template(this.model.attributes));
return this;
}
});
// Launch app
var app = new TeachersView;
So my question is, how I can pass a collection to a view, or a model of the collection to a view? I want to render the data in each row from the table. The browser gets the collection, as you can see here:
I've been trying for days, and I just can't understand the logic, I have read the documentation, and a little of the Addy Osmani's book but just can't get my head on it, can someone explain it to me? Been looking for answers in this site but some on them include some "add models" stuff, which confuse me more.
(The parameters of the model in the image, differ from the code. I'd translate to make it more easy to understand.)
how I can pass a collection to a view, or a model of the collection to a view?
You are already doing that in your code:
var teacher = new TeacherView({
model: model
});
Here you're passing a model to view's constructor using model option.
You can pass a collection to view via it's constructor like:
var app = new TeachersView({
collection:teachercollection
});
Which you can access inside the view via this.collection and this.model respectively.
var TeachersView = Backbone.View.extend({
el: '#table-body',
initialize: function() {
this.render();
},
render: function() {
this.$el.html('');
this.collection.each(function(model) {
this.$el.append(new TeacherView({
model: model
}).el);
},this);
return this;
}
});
Note that fetch() is asynchronous, so you'll need to wait till it succeeds before rendering the view.
See the suggestions in this answer regarding the changes I made to your render method.
this answer might help understanding a thing or two.
I have a backbone app where I want a view to be displayed when triggered. When i click the anchor the console says: Uncaught TypeError: Cannot read property 'fn' of undefined - I checked other issues of this kind and they say that jQuery is not loaded?? wtf? I dont get it...
My MenuView:
var LeftMenuView = Backbone.View.extend({
template: Handlebars.compile(Template),
events: {
'click li a.artAll': 'artAll',
},
artAll: function(event) {
event.preventDefault();
var artAllRouter = new Backbone.Router();
var route = '/artists/top100/all';
artAllRouter.navigate(route, {trigger: true});
}
....
The console tells me that the error is rooted in handlebars.js?
My HTML template:
<div>
{{#each}}
<p>
{{artist_name}}
</p>
{{/each}}
</div>
and my View:
define(['backbone','handlebars', 'text!templates/TopAllArtists.html'],
function(Backbone,Handlebars, Template) {
var TopAllArtView = Backbone.View.extend({
template: Handlebars.compile(Template),
initialize: function () {
_.bindAll(this, 'render');
},
render: function() {
var self = this;
self.collection.each(function(model){
self.$el.append(self.template({
artist_name:model.get('artist_name')
})
);
});
return this;
}
});
return TopAllArtView;
}
);
Anyone know what might be the issue?
According to the Handlebars documentation the each requires a list to iterate over,
<ul class="people_list">
{{#each people}}
<li>{{this}}</li>
{{/each}}
</ul>
Is artist name something to iterate over?
If model.get('artist_name') is iterable, ['name1', 'name2', ...] than,
<div>
{{#each artist_name}}
<p>
{{this}}
</p>
{{/each}}
</div>
If model.get('artist_name') is a string, 'Johann Sebastian Bach' than,
<div>
<p>
{{artist_name}}
</p>
</div>
I'm using backbone.js. I get a json like this:
{
first_name: 'David',
last_name: 'Smith',
family: [{father: 'David', mother: 'Rose', brother: 'Max'}]
}
first_name and last_name shows in through a PersonView (extending Backbone.View) and family data I want to show in a DetailsView.
So, I was trying like this. First:
personView = new PersonView(model: person)//person it's the json above
PersonView shows well. Then I want to pass the model to DetailsView like this:
detailsView = new DetailsView(model: JSON.parse(person.get('family'));
Well, when I try to pass the model to a template in DetailsView implementation, like this:
DetailsView = Backbone.View.extend({
className: 'tab-pane',
template: _.template($('#detail-tpl').html()),
render: function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
},
});
I get this message:
Uncaught TypeError: Object [object Object] has no method 'toJSON'
I don't know how to get or pass the model to solved this.
I'm trying several ways but I can't make it go.
Hope you can help me.
I think the problem is is because of this line.
model: JSON.parse(person.get('family')
It expects model to be an instance of backbone Model . But I don't think that is the case here.. try defining the Model for family or otherwise change the name of the key
Instead try this approach
familyMembers : JSON.parse(person.get('family')
In your view you can access this as
(this.options.familyMembers.toJSON())
The issue is that you model you are passing in is just an array. Therefore doesn't have the .toJSON method. As grant suggested you could use new Backbone.Model when creating the view but I would recommend using a collection and 2 new views for the family. It would look something like this.
var PersonModel = Backbone.Model.extend({
initialize: function(attributes, options) {
if(attributes.family) {
this.family = new FamilyCollection(attributes.family, options);
}
}
});
var FamilyCollection = Backbone.Collection.extend({
model: FamilyMember,
initialize: function(models, options) {
this.view = new FamilyView(options);
}
});
var FamilyMember = Backbone.Model.extend({
initialize: function(attributes, options) {
this.view = new DetailedView({
model: this
});
}
});
Then you would use a view structure something like this..
<div class="person">
<span class="name-first">David</span> <span class="name-last">Smith</span>
<div class="family-members>
<div class="family-member">
<span class="name-first">Rose</span> <span class="name-last">Smith</span>
</div>
<div class="family-member">
<span class="name-first">David</span> <span class="name-last">Smith</span>
</div>
<div class="family-member">
<span class="name-first">Max</span> <span class="name-last">Smith</span>
</div>
</div>
</div>
The "family" property is an array, you could do one of the following...
var familyArray = model.get('family');
new DetailsView({model: new Backbone.Model(familyArray[0])});
...or add a getFamily function to the person model...
var PersonModel = Backbone.Model.extend({
getFamily: function() {
var familyArray = this.get('family');
return new Backbone.Model(familyArray[0]);
}
});
...
new DetailsView({model: person.getFamily()});
I am doing a very simple Backbone app example and I keep getting a JS error message. I basically have two files:
app.js
This file creates a Backbone.js app the appends a span from a template using data from a collection view to an already created div on the html file.
/*Backbone.js Appointments App*/
App = (function($){
//Create Appointment Model
var Appointment = Backbone.Model.extend({});
//Create Appointments Collection
var Appointments = Backbone.Collection.extend({
model: Appointment
});
//Instantiate Appointments Collection
var appointmentList = new Appointments();
appointmentList.reset(
[{startDate: '2013-01-11', title: 'First Appointment', description: 'None', id: 1},
{startDate: '2013-02-21', title: 'Second Appointment', description: 'None', id: 2},
{startDate: '2013-02-26', title: 'Third Appointment', description: 'None', id: 3}
]
);
//Create Appointment View
var AppointmentView = Backbone.View.extend({
template: _.template(
'<span class="appointment" title="<%= description %>">' +
' <span class="title"><%= title %></span>' +
' <span class="delete">X</span>' +
'</span>'
),
initialize: function(options) {
this.container = $('#container');
},
render: function() {
$(this.el).html(this.template(this.model));
this.container.append(this.el);
return this;
}
});
var self = {};
self.start = function(){
new AppointmentView({collection: appointmentList}).render();
};
return self;
});
$(function(){
new App(jQuery).start();
});
index.html
This file just calls the jquery, backbone and other js libraries and also created the div container where the Backbone.js app from the previous file will append the data.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello-backbonejs</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script src="app.js" type="text/javascript"></script>
</head>
<body>
<div id="container"></div>
</body>
</html>
The error I get is the following:
Uncaught TypeError: Object [object Object] has no method 'reset' app.js:14
App app.js:14
(anonymous function) app.js:49
e.resolveWith jquery.min.js:16
e.extend.ready jquery.min.js:16
c.addEventListener.z jquery.min.js:16
You use Backbone 0.3.3 but Collection.reset was introduced in Backbone 0.5. See the changelog for more information.
Either upgrade Backbone (0.9.9 at the moment) (and Underscore and jQuery while you're at it) or use Collection#refresh if you absolutely have to keep Backbone 0.3.3 (but you will probably trip other errors down the road).