Question

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!

Answer 1

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);
}