Fancy working with a small team remotely? SupportBee is hiring developers!
Take a look at our jobs page
Out of the box, Backbone.js assumes that you are talking to a RESTful API. Based on this assumption,
Backbone.sync makes a few choices for you. If your collection's URL is
/tickets, on creating a new model, Backbone will make a
POST call to
/tickets. To edit an existing model, a
PUT call will be made to
/tickets/ticket_id. You can read about this (and on ways to customize this behavior) in the docs on Backbone.Sync.
Since we already have the
Reply model, we just need a
NewReply view to render the form and then process the reply on button click.
The template is a simple form
Apart from rendering the form, the
NewReply view also binds the
onclick behavior of the button to a callback
sendReply. Since we want access to the current context inside
sendReply, we use underscore's
bindAll function to bind
sendReply to the current context. You can read more about event delegation in Backbone's documentation.
To use this new class, we'll define the
renderNewReplyBox in the
SB.Views.Ticket class that we defined in the last chapter.
We initialize a new reply box and pass it the
@reply_list defined in
renderReplies. Since the event handlers for
@reply_list are already setup, there is no more setup needed.
Let's take a look at the form handler now, the code that actually creates a new reply using an API call and then renders the new reply in the replies list. For doing so much, the actual code is suprisingly small
Here, we are using the
create method of the collection. You can read more about it in the docs. Behind the scenes, this will create a new model instance (
SB.Models.Reply) with the attributes that we passed as the argument, make a POST call to
/tickets/ticket_id/replies(we had defined this in the
url function in the collection). By passing
wait:true in the options, we are telling Backbone.js to wait for the server before adding the new model to the collection (in case the API call fails for some reason you don't want the reply to be displayed in the reply list).
Since we bound to the
addOne event of the collection in the ticket view, as soon as this model is added to the collection, it is also rendered by the
What else would you like to see? What do you think is missing or not needed?comments powered by