I'm making a simple list of people with option when clicking on person's name the Router will take a name as a parameter 'student/:name' and find a right person's object in a collection. I instantiate collection in a GroupView class by fetching it from the server. And that's where the Error appears: to get the access to collection (so I can find right object) in my viewStudent() method in Router class, I'm making one more instance of GroupView(), and console shows an error and that's right, 'cause there're no objects in collection.
I cannot wrap my head around this, why in GroupView() I receive data from the server and my collection just works fine, but second time I instantiate GroupView() in a Router - there's no collection? Maybe there's any other way I can get access to the collection in my Router? Any help would be greatly appreciated.
var StudentModel = Backbone.Model.extend({
defaults: {
name: 'Volodya',
lastName: 'Peterson',
age: 22,
gender: 'male'
}
});
var StudentsCollection = Backbone.Collection.extend({
model: StudentModel,
url: '/students.json'
});
var StudentView = Backbone.View.extend({
tagName: 'li',
template: _.template($('#studentTpl').html()),
events: {
'click': function () {
eventAggregator.trigger('student:selected', this.model);
}
},
render: function () {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
var GroupView = Backbone.View.extend({
tagName: 'ul',
initialize: function () {
this.collection = new StudentsCollection();
this.collection.on('update', this.render, this);
this.collection.fetch();
},
render: function () {
var self = this;
this.collection.each(function (student) {
var studentView = new StudentView({
model: student
});
self.$el.append(studentView.render().el);
});
$('body').html(this.$el);
}
});
var RouterView = Backbone.View.extend({
tagName: 'ul',
render: function () {
var self = this;
_.each(this.model.toJSON(), function (value) {
self.$el.append('<li>' + value + '</li>');
});
return this;
}
});
var GroupController = function () {
this.start = function () {
var groupView = new GroupView();
};
};
var Router = Backbone.Router.extend({
routes: {
'': 'index',
'student/:name': 'viewStudent'
},
index: function () {
groupController.start();
},
viewStudent: function (name) {
var groupView = new GroupView();
var selectedStudent = groupView.collection.find(function (student) {
return student.get('name') === name;
});
$('body').append((new RouterView({ model : selectedStudent})).render().el);
}
});
var eventAggregator= _.extend({}, Backbone.Events),
groupController;
$(function () {
var router = new Router();
groupController = new GroupController();
Backbone.history.start();
eventAggregator.on('student:selected', function (student) {
var urlpath= 'student/'+ student.get('name');
router.navigate(urlpath, {trigger: true});
});
});
Related
I have 2 views and need to pass values between them.
var appModel1 = Backbone.Model.extend({
url: '/',
defaults: {
name: 'Default name'
},
validate: function(attr){
}
});
var appCollection1 = Backbone.Collection.extend({
model: appModel1
});
var collection1 = new appCollection1();
var model1 = new appModel1();
model1.bind('change', function(){
model1.save();
});
var appView1 = Backbone.View.extend({
model: model1,
_modelDataBind: undefined,
el:'#container1',
initialize: function(){
this._modelDataBind = new Backbone.ModelBinder();
this.render();
},
render: function(){
var template = _.template($('#app1').html());
this.$el.html(template);
var bindings = {
name: '#txtName'
};
var changeTrigger = {
'changeTriggers': {
'': 'keyup',
'#txtName': 'keyup'
}
};
this._modelDataBind.bind(this.model, this.$el, bindings, changeTrigger);
},
'events': {
'click #btnSubmit': 'addRecord'
},
addRecord: function(){
collection1.push(model1);
var item = '<li>Name: ' + model1.get('name') + '</li>';
var app2 = new appView2({collection: collection1});
$('#txtName').val('').focus();
}
});
var view1 = new appView1({});
var appView2 = Backbone.View.extend({
el: '#container2',
initialize: function(){
this.render();
},
render: function(){
var template = _.template($('#app2').html());
this.$el.html(template);
this.collection.each(function(model){
var item = '<li>Name: ' + model.get('name') + '</li>';
$('#infoList').append(item);
});
}
});
var view2 = new appView2({});
As of now, I have only been able to pass values using collection and id variables.
Are they reserved variables?
Can i use any other variable to pass data?
var app2 = new appView2({nameObj: nameObj});
this fails.
As per docs, Backbone view only acts upon model, collection, el, id, className, tagName, attributes and events properties of options object.
However, you can pass any other data you want, the whole options object will be available as the first parameter of initialize callback.
For example:
var AppView = Backbone.View.extend({
el: '#container2',
initialize: function(options){
// access your data here
this.valuableInformation = options.valuableInformation;
if(!options.doNotRender)
this.render();
},
render: function(){
}
});
new AppView({
valuableInformation:"it's nothing",
doNotRender: true
});
I know Im pretty close to figuring this out. Im trying to filter out my collection based on if favorite eq true. If I console.log - I can see it's doing its job. But it's not updating my view.
Anyone have any idea what I'm missing or doing wrong?
Here is my code:
var Products = Backbone.Model.extend({
// Set default values.
defaults: {
favorite: false
}
});
var ProductListCollection = Backbone.Collection.extend({
model: Products,
url: '/js/data/wine_list.json',
parse: function(data) {
return data;
},
comparator: function(products) {
return products.get('Vintage');
},
favoritesFilter1: function(favorite) {
return this.filter(function(products) {
return products.get('favorite') == true;
});
},
favoritesFilter: function() {
return this.filter(function(products) {
return products.get('favorite') == true;
});
},
});
var products = new ProductListCollection();
var ProductListItemView = Backbone.View.extend({
el: '#wine-cellar-list',
initialize: function() {
products.bind('reset', this.render, this);
products.fetch();
this.render();
},
render: function() {
console.log(this.collection);
var source = $('#product-template').html();
var template = Handlebars.compile(source);
var html = template(this.collection.toJSON());
this.$el.html(html);
return this;
},
});
// Create instances of the views
var productView = new ProductListItemView({
collection: products
});
var CellarRouter = Backbone.Router.extend({
routes: {
'': 'default',
"favorites": "showFavorites",
"purchased": "showPurchased",
"top-rated": "showTopRated",
},
default: function() {
productView.render();
},
showFavorites: function() {
console.log('Favorites');
productView.initialize(products.favoritesFilter());
},
showPurchased: function() {
console.log('Purchased');
},
showTopRated: function() {
console.log('Top Rated');
}
});
$(function() {
var myCellarRouter = new CellarRouter();
Backbone.history.start();
});
There's many mistakes in your code, I'll try to clarify the most I can :
Your collection should be just like this :
var ProductListCollection = Backbone.Collection.extend({
model: Products,
url: '/js/data/wine_list.json',
comparator: 'Vintage' // I guess you want to sort by this field
});
Your view like this :
var ProductListItemView = Backbone.View.extend({
el: '#wine-cellar-list',
initialize: function() {
this.collection.bind('reset', this.full, this);
this.collection.fetch();
},
full: function() {
this.render(this.collection.models);
},
favorites: function(favorite) {
this.render(this.collection.where(favorite)); // here's the answer to your question
},
render: function(models) {
console.log(models);
var source = $('#product-template').html();
var template = Handlebars.compile(source);
var html = template(models.toJSON()); // You may have to change this line
this.$el.html(html);
return this;
},
});
And in your router :
showFavorites: function() {
console.log('Favorites');
productView.favorites(true); // or false, as you like
}
I am trying to understand Backbone and tried to create some small REST API fronted, but can not get View to work.
fetch() returns valid JSON array of three elements. And this.collection.models is not empty (typeof object - []) - it has tree child object elements in it. But each iteration doesn't fire.
When check if collection.models exists with console.log(this.collection.models); it looks like all is right:
I would be thankful for any advice!
var Account = Backbone.Model.extend({});
var AccountsCollection = Backbone.Collection.extend({
model: Account,
url: 'api/v1/accounts',
initialize: function () {
this.fetch();
}
});
var AccountsView = Backbone.View.extend({
render: function() {
// Check if there is something
console.log(this.collection.models);
// This doesn't work
_.each(this.collection.models, function(model) {
console.log(model);
});
// Neither this
this.collection.each(function(model) {
console.log(model);
});
}
});
var a = new AccountsView({collection: new AccountsCollection()});
a.render();
First option
var AccountsCollection = Backbone.Collection.extend({
model: Account,
url: 'api/v1/accounts'
});
var AccountsView = Backbone.View.extend({
render: function() { /**/ }
});
var collection = new AccountsCollection();
var view = new AccountsView({collection:collection});
collection.fetch().done(function () {
// collection has been fetched
view.render();
});
Second option
var AccountsCollection = Backbone.Collection.extend({
model: Account,
url: 'api/v1/accounts'
});
var AccountsView = Backbone.View.extend({
initialize: function() {
this.listenTo(this.collection, 'sync', this.render);
},
render: function() { /**/ }
});
var collection = new AccountsCollection();
var view = new AccountsView({collection:collection});
Third option
var AccountsCollection = Backbone.Collection.extend({
model: Account,
url: 'api/v1/accounts',
initialize: function () {
this.deferred = this.fetch();
}
});
var AccountsView = Backbone.View.extend({
initialize: function() {
this.collection.deferred.done(_.bind(this.render, this));
},
render: function() { /**/ }
});
var collection = new AccountsCollection();
var view = new AccountsView({collection:collection});
i'm newbie, trying to learn Backbone.js, and i've got this error:
Cannot convert 'this.model' to object
I'm trying to build an easy architecture for audioplayer, but this error makes me mad! Don't understand why it happens, but browser console shows error in line this.model.bind("reset", this.render, this) of ListOfSongsView.
Here's my code:
$(function () {
var Player = Backbone.Model.extend({
defaults:{
//blablabla
}
});
var Playlist = Backbone.Collection.extend({
model: Player
});
var MyPlaylist = new Playlist([
{
//blablabla
}
//here comes more songs
]);
var ListOfSongsView = Backbone.View.extend({
tagName: 'ul',
id: "tracks",
initialize: function () {
this.model.bind("reset", this.render, this);
var self = this;
this.model.bind("add", function (player) {
$(self.el).append(new OneSongView({model:player}).render().el);
});
},
render: function (eventName) {
_.each(this.model.models, function (player) {
$(this.el).append(new OneSongView({model:player}).render().el);
}, this);
return this;
}
});
var OneSongView = Backbone.View.extend({
tagName: "li",
calssName: "clearfix",
template:_.template($('#tpl-one-song').html()),
initialize: function () {
this.model.bind("change", this.render, this);
},
render: function (eventName) {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
var AppRouter = Backbone.Router.extend({
routes:{
"": "list",
"!/": "list"
},
initialize: function () {
$('#block').html(new ListOfSongsView().render().el);
},
list: function () {
this.playlist = new Playlist();
this.ListOfSongsView = new ListOfSongsView({model:this.playlist});
this.playlist = MyPlaylist;
$('#block').html(new ListOfSongsView().render().el);
}
});
var app = new AppRouter();
Backbone.history.start();
});
What i'm doing wrong?
Please, help me, my head is already cracked :(
initialize: function () {
$('#block').html(new ListOfSongsView().render().el);
}
This is called the moment you construct the AppRouter.
You pass no model in argument of ListOfSongsView(), so this.model is undefined.
Then the initialize of the view is called:
initialize: function () {
this.model.bind("reset", this.render, this);
var self = this;
this.model.bind("add", function (player) {
$(self.el).append(new OneSongView({model:player}).render().el);
});
},
this.model is undefined, so you can't call bind on it.
I've manage to put together the below code through various examples, which seems to work okay, but it doesn't seem to preload my data, can anyone please tell me what I'm missing?
App = (function(Backbone, _){
var Note = Backbone.Model.extend(
{
defaults:
{
part1: 'hello',
part2: 'world'
}
});
var TableList = Backbone.Collection.extend({
model: Note
});
var ListRow = Backbone.View.extend(
{
tagName: 'li',
initialize: function()
{
_.bindAll(this, 'render');
},
render: function()
{
$(this.el).html('<span>'+this.model.get('part1')+' '+this.model.get('part2')+'</span>');
return this;
}
});
var ListView = Backbone.View.extend(
{
el: $('#layout_content'),
events:
{
'click button#add': 'addItem'
},
initialize: function()
{
_.bindAll(this, 'render', 'addItem', 'appendItem');
this.collection = new TableList();
this.collection.bind('add', this.appendItem);
this.counter = 0;
this.render();
},
render: function()
{
var self = this;
$(this.el).append("<button id='add'>Add list item</button>");
$(this.el).append("<ul></ul>");
_(this.collection.models).each(function(item){ // in case collection is not empty
self.appendItem(item);
}, this);
},
addItem: function()
{
this.counter++;
var note = new Note();
note.set({part2: note.get('part2') + this.counter});
this.collection.add(note);
},
appendItem: function(item)
{
var listRow = new ListRow({
model: item
});
$('ul', this.el).append(listRow.render().el);
}
});
var app = function(initialModels)
{
this.start = function()
{
this.tableList = new TableList();
this.listView = new ListView({collection: this.tableList});
this.tableList.reset(initialModels);
};
};
return app;
})(Backbone, _);
then init the app with:
<script language="javascript">
var app = new App([{"id":"95","note_title":"can we find the title"},{"id":"93","note_title":"some title"}]);
app.start();
</script>
okay, there are a few issues with your code,
there are 2 issues in your start method,
a) you throw away your collection
this.start = function()
{
this.tableList = new TableList();
this.listView = new ListView({collection: this.tableList});
this.tableList.reset(initialModels);
};
and then in intialize is where you overwrite the collection you pass along
initialize: function()
{
_.bindAll(this, 'render', 'addItem', 'appendItem');
this.collection = new TableList(); // this one gets overwritten, remove this line
}
b) you trigger a collection reset with the models you want to populate it with, but don't listen to an event, either add a listener like this:
this.collection.bind('reset', this.appendAllItems, this);
or create your collection like this:
this.start = function()
{
this.tableList = new TableList(initialModels);
this.listView = new ListView({collection: this.tableList});
};