Is there anyway to send backbone collection to another view without listenTo methods, to send it like an array or something else.
Im doing the fetch in the initialize function and then putting the collection in my array is that bad?
this.userModels = [];
this.collectionUser = new app.types.Users();
this.collectionUser.fetch();
this.userModels.push(this.collectionUser);
Im trying to send it like an array but on refreshing my web page sometimes im getting this
this.options child {
length: 15,
models: Array[15],
_byId: Object,
_listenId: "l4",
_events: Object…
}
and sometime getting with zero values
this.options child {
length: 0,
models: Array[0],
_byId: Object,
_listenId: "l4",
_events: Object…
}
So i wanna send my collection without listenTo method if it's possible.
First view:
app.types.FirstView = Backbone.View.extend({
initialize: function() {
this.collectionUser = new app.types.Users();
this.collectionUser.fetch();
};
sendCollection: function() {
var secondView = new app.types.SecondView({
collection: this.collectionUser
});
}
});
Second view:
app.types.SecondView = Backbone.View.extend({
initialize: function(options) {
this.collection = options.collection;
// so i want to get this.collectionUser here without listenTo
// method and without fetch here is that possible ? I said
// sometimes i get it sometimes not when i refersh my web page
// when i render it first time.
};
});
Yes you can send everything with js and use initialize for that view.
In your view you need to declare initialize function like this.
var someView = Backbone.View.extend({
template: _.template('some html file'),
initialize: function(options){
this.collection = options.collection
},
events: {
'click .someclass': 'doSomthing',
'click #someId': 'doSomthingElse'
},
doSomthing: function(event){
event.preventDefault();
var that = this;
that.collection.fetch({
success: function(){
that.$('element').append(that.collection);
}
});
},
render: function(){
var that = this;
that.$el.html(that.template);
return this;
}
});
And when u make new instance of your view need pass your collection as argument.
this.collectionUser = new app.types.Users();
this.view = new someView({collection: this.collectionUser});
This is it
Related
I send value to model as attribute
Views.App = Backbone.View.extend({
initialize: function () {
this.items = new Models.Items()
.on('sync:subitems', function (item) {
this.subitems = new Models.Subitems({itemId: item.attributes.id});
And successfully receive it in initilize of model
var Subitems = Models.Subitems = Backbone.Collection.extend({
initialize: function(attributes, options) {
this.itemId = attributes.itemId;
console.log(this.itemId);
},
model: Subitem,
url: './subitems?item_id=' + encodeURIComponent(this.itemId)
});
console.log returns the value of attribute in initialize.
But request is sent like:
'./subitems?item_id=undefined'
Why do I have undefined if I have access to the property in initialize? How can it be fixed?
Change url to a function and you'll be in the context of the backbone collection as appose to the window.
I have a backbone model which I don't have access to edit.So i want to modify the method of it, so that other methods functionality wont affect.
ShoppingDetail = Backbone.Model.extend({
className: 'CartID',
fetch: function() {},
checkForChanges: function() {},
newCoupon: function() {},
saveAndallow: function() {}
});
shoppingDetailModel = new ShoppingDetail();
shoppingCartView = new ShoppingCartView({
model: shoppingDetailModel
});
So i want to override saveAndallow method of the model.How could i do that without affecting other methods of that model
Why don't you create a new Model which will extend your ShoppingDetail Model ?
ShoppingDetail = Backbone.Model.extend({
className: 'CartID',
fetch: function() {},
checkForChanges : function() {},
newCoupon: function(){},
saveAndallow: function(){}
});
NewShoppingDetail = ShoppingDetail.extend({
saveAndallow: function(){};
});
shoppingDetailModel = new NewShoppingDetail();
shoppingCartView = new ShoppingCartView({
model : shoppingDetailModel
});
So now, when you call any method, it will first check if it is available in NewShoppingDetail, if not available, then it will check ShoppingDetail.
I reorganized my fully-working Backbone.js project and moved all my models, collections and views into separate files, and did a little rewriting, and now it won't render. I've tried everything I can think of. Any tips?
var SessionView = Backbone.View.extend({
model: Session,
el: '#list',
template: _.template($('#session-template').html()),
initialize: function () {
this.model.bind('change', _.bind(this.render, this));
this.render();
},
render: function () {
this.$el.html(this.template({sessions: sessionList}));
return this;
}
});
var sessionView = new SessionView();
var SessionListView = Backbone.View.extend({
el: '#list',
model: sessionList,
initialize: function () {
sessionList.bind('add', this.add, this);
sessionList.bind('reset', this.add, this);
sessionList.fetch();
},
render: function () {
var view = new sessionListView();
this.$el.append(view.render().el);
new SessionView({model: Session});
return this;
}
});
var sessionListView = new SessionListView();
Few things that I noticed:
Backbone.View does not have a model property. Only Backbone.Collection has a model property, which backbone will use to create an instance of model using the specified model constructor (blueprint) and data passed to it.
But views doesn't have a functionality like this (as far as I know). People usually pass an instance of a specific type of model with the options while creating a view, that's not the same as specifying a model property which points to a model constructor in the View's constructor.
sessionList doesn't seems to be an instance of a model (since it is specified in the view's constructor. If it's an instance it'll be shared by all the SessionListView instances which is not the desired behavior in most cases) and seems to be undefined
in the following:new SessionView({model: Session}); Session doesn't look like an instance of a model (Doesn't start with a capital letter, hoping you're following naming conventions) and also seems to be undefined
Well nothing is stopping you from specifying a model constructor in view's constructor or passing a model constructor into the view, but then you should make an instance of it (mostly while initializing) inside the view to work with. In other words you can not do blueprintOfAModel.bind('change'..); and you should build an actual model for the view to work with.
You seems to be creating new SessionListView in the render method of SessionListView itself with var view = new sessionListView(); won't that create infinite number of SessionListView instances when you simply try to create one..?
Well by looking at it again, you are not calling the actual constructor SessionListView with the new operator, but with an instance of it (sessionListView) which is likely to throw an error.
Both SessionView and SessionListView points to the same element, which seems weird. I haven't seen people doing that before since modifying the el of one view will have an impact on the other view, which is not desired in most practical cases.
Also judging by the names, since you have a list view of session, SessionView should not be pointing to a particular element with an id selector. You should create a new element for each SessionView instance. Backbone will do that for you if you don't specify el property.
(I'd say you created an unintentional mess that wasn't there with a little rewrite :)
To make sense, your code should look somewhat like the following. Note that things starting with capital letter are constructor functions and things starting with small letters are object instances
var Session = Backbone.Model.extend({
defaults: {},
initialize: function() {}
});
var SessionList = Backbone.Collection.extend({
model: Session,
initialize: function() {}
});
var SessionView = Backbone.View.extend({
initialize: function() {
this.model.bind('change', _.bind(this.render, this));
this.render();
},
template: _.template($('#session-template').html()),
render: function() {
this.$el.html(this.template({
session: this.model
}));
return this;
}
});
var SessionListView = Backbone.View.extend({
el: '#list',
initialize: function() {
this.collection.bind('add', this.add, this); // method doesn't exist, should throw error
this.collection.bind('reset', this.add, this); // same here
this.collection.fetch(); // <--- watch out, this happens asynchronously
},
render: function() {
// iterate through collection, create instances of SessionView and append to el
return this;
}
});
var sessionList = new SessionList(); // will create n number of Session instances in future
var sessionListView = new SessionListView({ // will create n number of SessionView instances in future
collection: sessionList
});
I have a category model that has child category models (That works fine) via this code:
var ImageSetCategory = Backbone.Model.extend({
childrenCategories : new Array(),
initialize: function () {
var self = this;
if (this.has('childrenCategories')) {
$.each(this.get('childrenCategories'), function () {
var category = new ImageSetCategory(this);
self.childrenCategories.push(category);
});
}
}
});
I also have a view that uses this model and renders all the children categories. (basicly, I'm attempting to make a tree view) It loops through the child categories using jquery, instantiates a new version of its self with each child category as the model, and renders it. But I'm hitting an endless loop that constantly is trying to process the same model.
var ImageSetCategoryView = Backbone.View.extend({
tagName: 'li',
className: 'nested-category',
template: Handlebars.templates.imageSetCategoryView,
render: function() {
var self = this;
var templateHtml = this.template(this.model.toJSON());
self.$el.html(templateHtml);
// *****************************
// ENDLESS LOOP
// this is always the same model from the array
// *****************************
$.each(self.model.childrenCategories, function () {
var categoryView = new ImageSetCategoryView({ model: this });
self.$el.children('ul').append(categoryView.render().el);
});
return this;
},
});
Why is this causing an endless loop? Am I'm not following best practices? My background is C# so I'm trying to accomplish this in an OOP way.
The reason is that all instances of ImageSetCategory share the same childrenCategories array. This way in ImageSetCategory.initialize function you create circular references (ImageSetCategory.childrenCategories points to the array and ImageSetCategory.childrenCategories[0] points to ImageSetCategory itself). This makes $.each in ImageSetCategoryView.render iterate over the same model. To avoid it you should initialize array inside of ImageSetCategory.initialize function:
var ImageSetCategory = Backbone.Model.extend({
initialize: function () {
var self = this;
this.childrenCategories = [];
if (this.has('childrenCategories')) {
$.each(this.get('childrenCategories'), function () {
var category = new ImageSetCategory(this);
self.childrenCategories.push(category);
});
}
}
});
To learn more about why this happens read about prototypes in JavaScript and how they are used to implement object-oriented paradigm.
I need to fetch data having a specific id
and which id is defined in the view instance.
Here the example, see the comments in MyModel definition:
// my view instance
var myView = new MyView({
model: {id: 12321}
});
MyView = Backbone.View.extends({
initialize: function()
{
myModel.fetch();
}
});
MyModel = Backbone.Model.extends({
url: function url ()
{
// how to get the id passed to view instance?
return "http:..../id/" + this.id;
}
});
Model should not has any knowledge of the existence of the View, so the View should be the one that sais to the Model which id to fetch:
MyView = Backbone.View.extends({
initialize: function()
{
myModel.id = this.model.id;
myModel.fetch();
}
});
(I've used your example code as template for my example, but I have to say I feel several weird things on it, I suppose is just a matter of taste)
Update: My very personal taste opinions
Is very difficult to do this but as you requested I'll share with you my very personal code review of your example code. Take this as it is: a very humble opinion.
this.model confused
I would not use attribute names that can create confussion:
var myView = new MyView({
model: {id: 12321}
});
Into this instance this.model is making reference to a raw Hash but in a Backbone context this is against the intuitive feeling that this is gonna be a Backbone.Model.
I rather change it for something like this:
var MyView = Backbone.View.extend({
initialize: function( opts ){
this.model_id = opts.model_id;
}
})
var myView = new MyView({ model_id: 12321 });
I think this naming is more intuitive.
close variables scopes
This code can only works if myModel is in an scope bigger that it should be:
MyView = Backbone.View.extends({
initialize: function()
{
myModel.fetch();
}
});
I rather prefer using more encapsulated scopes, even if myModel has been declared in the out-side context of your View the View should use a variable of its private context. For example
var MyView = Backbone.View.extends({
initialize: function( opts ) {
this.model = opts.model;
this.model.fetch();
}
});
var myView = new MyView({ model: myModel });
Check the detail that I have also added var in front of MyView because if not MyView will be a window global variable.
use the Backbone urlRoot
In your example, this ...
MyModel = Backbone.Model.extends({
url: function url ()
{
// how to get the id passed to view instance?
return "http:..../id/" + this.id;
}
});
... can be summarized as this:
MyModel = Backbone.Model.extends({
urlRoot: "http:..../id"
});