brief structure of my app
-->master view
-->model
-->Collection
-->SubView
Master view create many subview with collection instances.
masterview inside
newTable:function(){
var collection=new Collection;
var subview=new SubView({collection:collection});
}
I need to get send requests from server.
I need to update collections according to response.
for those requirements
I need to maintain the which request from which collection
which collection have to update on response.
How can I maintain requests and responses?
The point of Backbone.sync is to handle that for you. When you have a collection, you can perform a fetch on it like this:
collection.fetch()
The collection will then make an ajax request to its url via Backbone.sync and update itself when it returns. It will then trigger the "reset" event to let you know that it has been updated. Bind the subviews to the "reset" event on their respective collection like this:
SubView = Backbone.View.extend({
initialize: function(){
this.collection = this.options.collection;
this.collection.bind("reset", this.render, this);
}
})
This particular subview should be instantiated like this new SubView({collection: yourCollection}). It will then render itself when you do a yourCollection.fetch(). You can of course bind to any function you like!
Related
I'm using Backbone and I have the following model and collection
App.Models.Person = Backbone.Model.extend({
});
App.Collections.People = Backbone.Collection.extend({
model: App.Models.Person,
url: 'api/people',
});
However what I'm struggling on is the best way to render this collection. Here's how I've done it so far which works but doesn't seem to be the most elegant solution
App.Views.PeopleView = Backbone.View.extend({
el: $(".people"),
initialize: function () {
this.collection = new App.Collections.People();
//This seems like a bad way to do it?
var that = this;
this.collection.fetch({success: function(){
that.render();
}});
},
render: function () {
var that = this;
_.each(this.collection.models, function (item) {
that.renderPerson(item);
}, this);
},
I'm fairly new to Backbone but have to assign this to a different variable to I use it inside of the success function just seems like a bad way of doing things? Any help on best practices would be appreciated.
Backbone allows you to register for events that you can react to. When the collection is synchronized with the server, it will always fire the sync event. You can choose to listen for that event and call any given method. For instance ...
initialize: function () {
this.collection = new App.Collections.People();
this.listenTo(this.collection, "sync", this.render);
// Fetch the initial state of the collection
this.collection.fetch();
}
... will set up your collection so that it would always call this.render() whenever sync occurs.
The docs on Backbone Events are succinct but pretty good. Keep in mind a few things:
The method you use to register event listeners (i.e. listenTo or on) changes how you provide the context of the called function. listenTo, for instance, will use the current context automatically; on will not. This piece of the docs explains it pretty well.
If you need to remove a view, you will need to disconnect event listeners. The easiest way to do that is to use listenTo to connect them in the first place; then when destroying the view you can just call view.stopListening().
For rendering, there are a lots of suggestions for how to do it. Generally having a view to render each individual model is one way. You can also use Backbone.Collection#each to iterate over the models and control the scope of the iterating function. For instance:
render: function() {
this.collection.each(function(model) {
var view = new App.Collections.PersonView({ model: model });
view.render();
this.$el.append(view.$el);
}, this);
}
Note the second argument to .each specifies the scope of the iterator. (Again, have a look at the docs on controlling scope. If you'd rather have a framework help out with the rendering, check out Marionette's CollectionView and ItemView.
If your view is supposed to just render the collection you can send the collection to temnplate and iterate through in template, otherwise you can create another subView for that purpose or send the individual models of the collection to another subview and append to the container, hope it was helpful.
I have complex nested structure of backbone relational models.
Every time I destroy a model, it is expected that the all models from relation are destroyed.
How do I do it?
Apparantely Backbone-Relational does not take care of it.
I would prefer to overload the Backbone model destroy method of your custom models. So you can destroy your nested models. And after that you can destroy the model with Backbone.Model.prototype.destroy.call(this);
Example:
var MyModel = Backbone.Model.extend({
destroy: function(){
var xhr = this.myNestedModel.destroy();
xhr.always(_.bind(function(){
Backbone.Model.prototype.destroy.call(this);
},this));
//or if you don't want to wait for the response without always
//Backbone.Model.prototype.destroy.call(this);
}
});
A different approach to overloading destroy would be to use events to propagate changes. The exact setup and complexity would depend on the relationships you have defined and also on how you create and destroy your models.
How do you call multiple models in a single view
Usual case is that you create a backbone model
var myModel = Backbone.Model.extend({ url:"api/authentication"});
and then assign it to a view, making it the default model of a certain view
var LoginView = Backbone.View.extend({
model: new myModel(),
initialize: function(){
_.bindAll(this, 'render', 'render_thread_summary', 'on_submit', 'on_thread_created', 'on_error');
this.model.bind('reset', this.render);
this.model.bind('change', this.render);
this.model.bind('add', this.render_thread_summary);
},
...
});
But I have many methods in a single view that calls different models. Currently I just create an instance of a model inside an event method.
The other solution that I'm thinking would be like this
initialize: function(){
_.bindAll(this, 'render', 'render_thread_summary', 'on_submit', 'on_thread_created', 'on_error');
new.model1().bind('reset', this.render);
new.model2().bind('change', this.render);
new.model3().bind('add', this.render_thread_summary);
},
But are these good practices? What else are the other way to do this. Thanks.
UPDATE
In response to Peter, here's my actual code
var userRegModel = Backbone.Model.extend({url: fn_helper.restDomain()+'user/reg'});
var userResendActivationModel = Backbone.Model.extend({url: fn_helper.restDomain()+'user/token/activation/new'});
var userResetPassModel1 = Backbone.Model.extend({url: fn_helper.restDomain()+'user/pwdreset/token/new'});
var userResetPassModel2 = Backbone.Model.extend({url: fn_helper.restDomain()+'user/pwdreset/change'});
var userLoginModel = Backbone.Model.extend({url: fn_helper.restDomain()+'user/login'});
_view: Backbone.View.extend({
el: 'div#main-container',
initialize: function(){},
events: {
'click #user-signup': 'signupUserFn', //userRegModel
'click a#activation-resend': 'resendActivationFn',//userResendActivationModel
'click #reset-password-submit1': 'execResetPasswordFn', //userResetPassModel1
'click #reset-password-submit2': 'execResetPasswordFn', //userResetPassModel2
Each models declared above corresponds to different methods declared in events
Normally model instances should be passed to views in the options argument to the initialize method.
Generally models represent data that either is currently or will eventually be stored in database somewhere. Now, sometimes you want to create a model just for managing ephemeral browser state, which is fine, but the common case is that most read/edit/delete views don't create models unless that's their primary purpose like a "Post New Comment" form. So normally if your view has to show some models, allow them maybe to be updated and saved, they should come into the view in the options argument to the initialize function.
However, if your view really needs so many models and nothing else in your system cares about them, just create them during initialize and store them directly as properties on this (your view instance) and off you go.
If you post a more complete code sample, we can give specific recommendations, but as it is it looks like if you have a LoginView and you need more than 1 model for it, you might be off in the weeds design-wise.
Part Deux
OK, so it looks like you think every API endpoint needs a model. Just implement those as methods on a single model class that use Backbone.sync with the appropriate url option.
var Model = Backbone.Model.extend({
resendActivation: function () {
return Backbone.sync.call('update', this, {url: fn_helper.restDomain()+ 'user/token/activation/new'});
}
});
You may have to do some manual triggering of events and I'm not sure what your API returns, but fundamentally these are all dealing with a single user record and can be handled by a single model.
Misc unrelated tips:
_.bindAll(this); //don't bother listing methods out
this.model.on('reset change', this.render); //bind multiple events at once
JavaScript by vast majority convention use camelCase not lower_with_underscores
I have a form that create a model for a collection. That fires an add event to the collection. I have that binded to a method:
this.collection.bind('add', this.addOne, this)
fires...
addOne: function(tenant) {
var self = this
var collection = this.collection
var view = new TenantView({model: tenant,collection:collection});
self.$el.append(view.render().el);
}
The create syncs it to the database but, the new appended view still isNew to backbone since it hasn't fetched the collection and grabbed the id for the new model.
My question, how can I grab the synced model from the server (that has the id and isn't isNew) without fetching the entire collection then append it?
Use the sync event instead of add...
this.collection.bind('sync', this.addOne, this);
The add event gets fired immediately when calling create; but sync gets fired once the server has responded to the create method, so it should include the correct model id.
You can also wait for the server's response, before adding the model to the collection -- to do that use wait: true in create's options hash: collection.create({ ... }, { wait: true }).
Creating a model will cause an immediate "add" event to be triggered on the collection, as well as a "sync" event, once the model has been successfully created on the server. Pass {wait: true} if you'd like to wait for the server before adding the new model to the collection.
I have a collection of models. When a model changes it triggers a change event on the collection. I watch for the collection change event and then I update the UI.
How should I go about updating the UI? Don't I need to know what models are new, so I can append, and what already exist, so I can update?
One of the reason I feel I need this granularity is because there's an animation transition, so I need to relate every model to it's previous state. Does backbone help with this or should I just build this on my own?
to know which models are new, listen to the collection's "add" event. then you can render the individual item.
MyView = Backbone.View.extend({
initialize: function(){
_.bindAll(this, "renderItem");
this.collection.bind("add", this.renderItem);
},
renderItem: function(item){
// render the new item here
},
render: function(){
this.collection.each(this.renderItem);
}
});
in this example, rendering the collection works the same as rendering an individual item - it calls the same renderItem method that the "add" event calls.
to handle the scenario where you have a sorted list... you'll have to do some logic in your renderItem method to figure out the location of the item. something like this maybe (untested code... just an idea):
MyView = Backbone.View.extend({
initialize: function(){
_.bindAll(this, "renderItem");
this.collection.bind("add", this.renderItem);
},
renderItem: function(item){
var itemView = new ItemView({model: item});
itemView.render();
return itemView;
},
render: function(){
this.collection.each(function(item){
var itemView = renderItem(item);
var itemIndex = item.get("index");
var previousItem = this.$(".myList")[itemIndex];
$(itemView.el).insertAfter($(previousItem));
});
}
});
this code assumes you have an index attribute on your models to know the order that the models are supposed to be in.
also note that there's a high likelihood that this code won't execute as-is, since i haven't tested it out. but it should give you an idea of the code you'll want to write.
You don't need to go through the collection if the model changes. Simple render a sub view for each model and in which you can handle the change event.
Imagine you have the following structure:
Collection: Tasks
Model: Task
And two views:
Tasks view (main view)
Task view (sub view)
In the #render method of the Tasks view you render e.g. a <ul> element which will hold your tasks (sub views). Then you iterate through all your collection's models and create a Task view for each, passing the model and appending it's el to your main views <ul>.
Within your Task view you bind the #render method to the models change event and each Task view will take care of itself. — Am I making sense?