To learn backbone Im creating a Twitter like app. So you know that Twitter sends a GET request to the server every N seconds to check for new tweets. If there are new tweets, it creates the hidden li elements and shows the button with "N new Tweets". If you click it, it shows the hidden li elements, showing the new tweets. But the behaviour is different when you add a new tweet: the tweet is visible. You don't have to click the button to see it.
I already have made the first part, for the hidden tweets. For the part of posting a new tweet and showing it direclty, I thought it would be easy to do by creating the new model, calling collection.create() and triggering the right event, something like:
var newTweet = new Tweet();
newTweet.set( /* set the attributes here. Some attributes are missing, because they are calculated server side */ );
var created_tweet = this.collection.create( newTweet, { silent: true, wait: true } ); // I choose silent=true because the add event on my collection is in charge of adding the new hidden tweets when there are new ones on the server
this.collection.trigger("posted_new_tweet", created_tweet);
Then, my collection is subscribed to the event "posted_new_tweet", so every time a user posts a new tweet, a specific method of my collection is being called. This approach was working fine until I got errors due to the variable created_comment passed in the trigger: it is not "complete". I mean that the model has some attributes like "id" or *"created_on"* that are undefined. These attributes are calculated server side, but I thought that if I passed wait=true, it would wait and update my model with the response given by the server (when a POST request is made to the server, it returns the new created model in json)
Shouldn't my model have the server side attributes aswell? Is it the right approach for such a thing? In case that it is not, how can I have 2 different methods to display a collection view?
Thank you!
A collection is an ordered set of models. It is used to deal with a group of related models. It handles the loading and saving of new models to the server. It provides helper functions to perform aggregation and computation against a list of models.
BackboneJS allows developing of applications and the frontend in a much easier way by using JavaScript functions. BackboneJS provides various building blocks such as models, views, events, routers and collections for assembling the client side web applications.
Backbone. js is a model view controller (MVC) Web application framework that provides structure to JavaScript-heavy applications. This is done by supplying models with custom events and key-value binding, views using declarative event handling and collections with a rich application programming interface (API).
create
is still asynchronous even if you pass { wait: true }
. The difference is without wait
the model will get added to the collection immediately while with wait
backbone won't add it to the collection until a success response from the server.
What you should do is add a success callback to create
that fires the event upon the server response.
var created_tweet = this.collection.create( newTweet, { silent: true, wait: true, success: this.successCallback } );
// Add successCallback as a method to the collection
successCallback: function(collection, response) {
// I'm not 100% positive which values are passed to this function. Collection may actually be the new model.
this.collection.trigger("posted_new_tweet", created_tweet);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With