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
Related
I've been trying to get my first Backbone.js app up and running, following the Backbone.js primer here.
I've followed the example through and now I'm trying to customise it for my purposes which are to simply retrieve and read a JSON file from my server. I don't need to be able to change or delete any of the data.
I've set up my html as per the primer below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Backbone.js Primer</title>
<script type="text/javascript" src="./node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="./node_modules/underscore/underscore-min.js"></script>
<script type="text/javascript" src="./node_modules/backbone/backbone-min.js"></script>
<script type="text/javascript" src="./node_modules/moment/moment.js"></script>
<script type="text/javascript" src="./backbone.js"></script>
</head>
<body>
<div>
<h1>Transcripts Data</h1>
<div id="dailyTranscripts-app">
<ul class="dailyTranscripts-list"></ul>
</div>
</div>
</body>
</html>
I've then coded my backbone.js file as the primer describes below:
var yesterday = moment (new Date()).add(-1, 'days').format('YYYY-MM-DD')
var yesterdaysDataURL = 'https://mihndbotblob.blob.core.windows.net/mihndbot-transcripts/finalTranscripts/dailyTranscripts/' + yesterday + '.json'
// Model class for each transcript iten
var DailyTranscriptsModel = Backbone.Model.extend({
defaults: {
type: null,
MessageID: null,
MessageTime: null,
MessageChannel: null,
MessageSenderID: null,
MessageSenderName: null,
ConversationID: null,
MessageText: null,
MessageRecipientID: null,
QuickReplyDisplayText: null,
QuickReplyPayload: null,
Question: null,
Answer: null,
FollowUpPrompts: null
}
});
// Collection class for the DailyTransctipts list endpoint
var DailyTranscriptsCollection = Backbone.Collection.extend({
model: DailyTranscriptsModel,
url: yesterdaysDataURL
});
// View class for displaying each dailyTranscripts list item
var DailyTranscriptsListItemView = Backbone.View.extend({
tagName: 'li',
className: 'dailyTranscripts',
initialize: function () {
this.listenTo(this.model)
},
render: function () {
var html = '<b>Message ID: </b> ' + this.model.get('MessageID');
html += '<br><b>Message Time: </b>' + this.model.get('MessageTime');
this.$el.html(html);
return this;
}
});
// View class for rendering the list of all dailyTranscripts
var DailyTranscriptsListView = Backbone.View.extend({
el: '#dailyTranscripts-app',
initialize: function () {
this.listenTo(this.collection, 'sync', this.render);
},
render: function () {
var $list = this.$('ul.dailyTranscripts-list').empty();
this.collection.each(function (model) {
var item = new DailyTranscriptsListItemView({model: model});
$list.append(item.render().$el);
}, this);
return this;
}
});
// Create a new list collection, a list view, and then fetch list data:
var dailyTranscriptsList = new DailyTranscriptsCollection();
var dailyTranscriptsView = new DailyTranscriptsListView({collection: dailyTranscriptsList });
dailyTranscriptsList.fetch();
The major changes I've made to the code (apart from some customisations) are to remove the templates the primer uses to create the views (I couldn't get them working) and I've removed the Backbone CRUD elements as I only require my app to read data from the server, not update or delete it.
The issue I have is that whilst I'm pulling back the JSON file from the server, none of the data is rendering in the HTLM <div> as expected, it's just blank.
I know that Backbone.js is retrieving the data as when I add .then(function() {console.log(dailyTranscriptsList);}); to the final dailyTranscriptsList.fetch() call I can see the data in the browser console:
You need to wrap all of your backbone.js code within jQuery's .ready()
// backbone.js
$(document).ready(function () {
// all your backbone.js code here
})
This causes your js to run after the DOM is ready, so Backbone will know how to find the elements it needs in order for views to work.
You could also move <script type="text/javascript" src="./backbone.js"></script> to the end of the page, right before </body>
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).
i am just writing a simple backbone program. But i am not getting how to fetch data from backbone collection to backbone template. Complete code is written below:
<!doctype html>
<html>
<head>
<title>Backbone tutorial</title>
</head>
<body>
<div class="user">user</div>
<div class="page"></div>
<script type="text/template" id="user-list-template">
I am not able to get data on daya.key
<h1> <%= data.key %> </h1>
</script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="underscore.js"></script>
<script type="text/javascript" src="backbone.js"></script>
<script>
This is my Collection code
var Album = Backbone.Collection.extend({
url : "/data.json"
});
This is my view code
var UserList= Backbone.View.extend({
el:'.page',
template:_.template($('#user-list-template').html()),
render : function(){
var that=this;
var album= new Album();
album.fetch({
success:function(album){
var _data = {data : album.models} ;
$(that.el).html(that.template(_data));
}
})
}
});
This is my Router code
var Router = Backbone.Router.extend({
routes: {
"": "home" // #help
}
});
var userList= new UserList();
var router = new Router();
router.on('route:home', function(){
userList.render();
});
Backbone.history.start();
</script>
</body>
</html>
and here is the data.json file
{ "key" : "value to print on template "}
Two modifications i would suggest
1.First check the data feild in your template. Since you are fetching data from the collection it will be array of models.
<h1> <%= data[0].key %> </h1>
or you can use a for loop iterating over the collections
2.The data.json file should look like this
[{"key" : "value"}]
Server needs to return a JSON array of model object for collection.fetch() request. So the data.json should look like this:
[{"key":"value to print on template"},{"key":"another value"}]
And try this collection view render implementation:
Model:
var User = new Backbone.Model.extend({});
Collection:
var Album = new Backbone.Collection.extend({
model: User,
url: "/data.json"
});
//create collection instance
var album = new Album();
View:
var UserList= Backbone.View.extend({
el:'.page',
template:_.template($('#user-list-template').html()),
initialize: function(){
//register a collection data add event handler
this.listenTo(album,"add",this.addUser);
//register a collection data remove event handler
this.listenTo(album,"remove",this.removeUser);
album.fetch();
},
render : function(){
},
addUser: function(user){ //apply model data to view template and append to view element
this.$el.append(this.template(user.toJSON()));
},
removeUser: function(user){
//view state update implementation when data have been removed from collection
}
});
Template:
<script type="text/template" id="user-list-template">
<h1><%= key %></h1>
</script>
div.user view will add/remove user-list view dynamically according to collection data manipulation.
Hope this helpful.
I have jquery.js, backbone.js ,underscore.js inlcuded in my html header (I can see these files from browser)
<script type='text/javascript'>
(function($){
var Student= Backbone.Model.extend({
initialize: function(){
console.log("studentis createrd");
}
});
var students= Backbone.Collection.extend({
model: Student
});
console.log(students.models);
})(jQuery);
</script>
I got this error message
UPDATE:html header
<script src="/static/js/jquery.js" type="text/javascript"> </script>
<script src="/static/js/backbone.js" type="text/javascript"></script>
<script src="/static/js/underscore.js" type="text/javascript"></script>
First you need to make sure that Backbone is loaded properly --
The order should be
---> jQuery
---> underscore
---> backbone
Next need to create a new instance of the collection
You cannot operate directly on the Model or Collection before creating an instance of it.
(function ($) {
var Student = Backbone.Model.extend({ // Created a Student model
initialize: function () {
console.log("studentis createrd");
}
});
var Students = Backbone.Collection.extend({ // Create a Students collection
model: Student
});
var student = new Student(); // Create a instance of Student model
var students = new Students(); // New instance of Students collection
students.add(student); // Add a model to the collection
console.log(students.models);
})(jQuery);
Check Fiddle
I think you also need to pass backbone as parameter to you function along with jQuery
<script type='text/javascript'>
(function($,Backbone){
var Student= Backbone.Model.extend({
initialize: function(){
console.log("studentis createrd");
}
});
var students= Backbone.Collection.extend({
model: Student
});
console.log(students.models);
})(jQuery,Backbone);
</script>
Per my comment:
When are you importing the backbone file?
Backbone has a dependency on underscore to work, so you need to have Jquery -> Underscore -> Backbone in order for backbone to load properly.
I'm starting out with Backbone.JS, and have a question about how this should work.
I have a page which should load a list of sports, and then render the view. Now, because the list of sports is loaded via AJAX, I need to bind events to the collection so that it's only rendered when the data from that collection is actually loaded.
Here's what I've got so far:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test</title>
<script src="../../src/vendor/zepto.js" type="text/javascript" charset="utf-8"></script>
<script src="../../src/vendor/underscore.js" type="text/javascript" charset="utf-8"></script>
<script src="../../src/vendor/backbone.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="sportsList"></div>
<script type="text/template" id="sports-template">
<ul>
<% _.each(sports, function(sport){ %>
<li>
<%= sport.getDescription() %>
</li>
<% }); %>
</ul>
</script>
<script type="text/javascript" charset="utf-8" src="application.js"></script>
</body>
</html>
As for the javascript code:
var Sport = Backbone.Model.extend({
getDescription: function() {
return this.get('description');
}
});
var Sports = Backbone.Collection.extend({
model: Sport,
initialize: function(options) {
this.bind("refresh", function() {
options.view.render();
});
var sports = this;
$.ajax({
url: 'http://localhost:8080/?service=ListSportsService&callback=?',
dataType: 'jsonp',
success: function(data) {
sports.refresh(data);
}
});
}
});
var SportsView = Backbone.View.extend({
el: '#sportsList',
template: _.template($('#sports-template').html()),
initialize: function() {
this.model = new Sports({view: this});
},
render: function() {
$(this.el).html(this.template({sports: this.model.models}));
return this;
}
});
var SportsController = Backbone.Controller.extend({
routes: {
'sports': 'listSports'
},
listSports: function() {
new SportsView();
}
});
$(document).ready(function(){
window.app = new SportsController();
Backbone.history.start();
});
The part that really nags me is having to pass the view to the collection and binding the refresh event there so that I can render the view once everything is loaded.
My question is, is there a DRYer/simpler way of doing this that I'm missing?
Keep in mind I'm using ZeptoJS instead of jQuery.
Your collection should read
var Sports = Backbone.Collection.extend({
model: Sport,
url: '/?service=ListSportsService&callback=?'
});
Always use Backbone.sync functionality when possible (here by specifying the url on the collection and using fetch).
Your controller should read
var SportsController = Backbone.Controller.extend({
routes: {
'sports': 'listSports'
},
listSports: function() {
//create the view with the collection as a model
this.sports = new Sports();
this.view = new SportsView({model: this.sports});
this.sports.bind("refresh", this.view.render);
// fetch all the sports
this.sports.fetch();
}
});
Enjoy.