Tweet about this on TwitterShare on FacebookShare on Google+Share on StumbleUponShare on TumblrShare on RedditPin on PinterestEmail this to someone

We have some backbone models, collections, views and router in place by now, we have rendered the category page using them. But still no data on the page, and buttons are not working. In this part we will add some events to our views and models and load and show data.

A sip of Coffee with Laravel and Backbone - Book

 

Step 1 – Implement Events

Let’s assume that we managed to wire-up events somehow and have loaded data from the server, how do we show them? “In the result area- table body”, where have we defined a layout for each table content row? that’s so far missing, let’s create new template to show table row with Category model data.

Open ‘application/views/index.blade.php’ and add following section to template area.

For now don’t worry about <%= %> tags, these are place holders in this template so that we can replace it with actual values at runtime. (http://underscorejs.org/#template)

Now let’s define a Backbone.View to represent this template. Open ‘public/coffee/views.coffee’ file and add this code.

Also at the end of the file, add this new view to @app as the others

In this view we have defined ‘tagName‘ instead of ‘el‘, because we need to create new DOM element (i.e. <tr> </tr> section in this case) instead of attaching itself to existing DOM element. Also we define ‘template:‘ and use _.template() utility function given by Underscore.js to load and compile it for rendering later with model object. Then we have event table defined. As we did with router table in Backbone.Router this is a table for events that could be triggered by components of this DOM element. Also remember here we only have to worry about elements and events related to this view.

‘click .btn-edit’ : ‘edit’ – This indicates when there is a click event on a element which has ‘btn-edit‘ as its class attribute value then invoke method ‘edit‘ of this view, as we can see in the template we have such html element. <a class=”btn-edit”>Edit</a> There’s another event for delete as well.

In this view we use render() method to render the view, because we have some data to bind with the UI. So whenever there is a change of data, it’s good to render the UI. What we do here is, take the ‘this.template‘ that we compiled and assigned, use it to call with associated model of this view (i.e Category model, will see how to pass this in later).

Now if you go back and check the HTML template you can see it has <%= m.code %> <%= m.name %> to access the properties of the model and output to the UI. @$el gives jQuery wrapper to the el of this view (same as $(‘tr’) in this case). Finally we set the <tr> id= property with model.id. (Just to show you how to access attribute and assign value).

Step 2 – Implement Search Panel and Events

Then we will modify search panel to attach a model to it’s view and trigger ‘search’ button event. First we need to pass CategorySearchModel instance to CategorySearchView, will do this in CategorySearchView, We will also create empty CategoryCollection and pass it to CategoryResultView so that when collection is loaded with Categories it can display them. So change the CategoriesView to to cater this. As CategorySearchView and CategoryResultView are independent views we need a way to propagate search event to the outside so that it can load data from server and fill the CategoryCollection. We will place this event handler in CategoriesView as that is where we first create CategorySearchModel and CategoryCollection. Final CategoriesView code would be as shown below.

Note that how we can add events to models by .on function. This indicates when there is an event triggered with the name ‘search’, invoke ‘search()’ method and pass ‘this’ as the context. Similarly when ‘reset’ event is triggered it will invoke ‘reset()’ function. Inside search function we call collection.fetch() as we’ve seen in previous tutorial. and in reset() function we just reset the collection with empty array.

Step 3 – Implement CategorySearchView

Then will modify CategorySearchView to deal with it’s model (i.e. CategorySearchModel)

Now you know what events table does, it does the wire-up between actual UI elements and functions to invoke. In coffeescript we use syntax methodName:(p1, p2)–> to define method with some parameters. Here we get the Event object as a parameter e, and we call preventDefault() in order to avoid default HTML form submit caused by this submit button event (i.e. default event if we do not intend to handle it by ourselves), since we do handle all events by ourselves (Otherwise entire HTML page will be refreshed). Then we trigger ‘search‘ event on ‘this.model‘ (which is CategorySearchModel passed into this view), that will cause the trigger ‘search()‘ function in CategoriesView, which then does the CategoryCollection.fetch() call.

Step 4 – Render Category Collection as HTML Output

Finally the hard part. Do the actual category collection rendering in CategoryResultView. Modify CategoryResultView as below.

We just added new event listener to the collection object (this is CategoryCollection instance we created in CategoriesView) passed in. So that when collection is filled with models (or emptied) it fires ‘reset‘ event. Then for that event we call render() function. Now this is why we separated static view rendering into initialize() function and model/collection related rendering to render() function in earlier post. So that every time collection is changed we just render HTML table body but not the entire HTML table. In the render() function first we get jQuery reference to <tbody> element then clear contents of it. Then traverse through each item (Category model instances) of the CategoryCollection and create new CategoryRowDisplayView with the Category item passing as the model to the view. Then render it, get the render output (el), append it to the <tbody>.

I hope everything works well as I’ve been implementing this code with you. That’s why you see step by step code construction instead of final version of it.

Step 5 – Run and Test

Compile the coffeescripts go to http://lbc.dev/category. Then click on ‘Search’ button and you will see item we created in earlier post. If not just create new categories same way using console as before and try again. Click on ‘Clear’ and it will clear the table.

Category Table with Categories

Category Table with Categories

 

A sip of Coffee with Laravel and Backbone - Book

Posts of this series
Laravel, Backbone.js + Coffeescript Tutorial Part I – Introduction
Laravel, Backbone.js + Coffeescript Tutorial Part II – Setup
Laravel, Backbone.js + Coffeescript Tutorial Part III – Install Laravel
Laravel, Backbone.js + Coffeescript Tutorial Part IV – Database
Laravel, Backbone.js + Coffeescript Tutorial Part V – Data model
Laravel, Backbone.js + Coffeescript Tutorial Part VI – REST API
Laravel, Backbone.js + Coffeescript Tutorial Part VII – REST API
Laravel, Backbone.js + Coffeescript Tutorial Part VIII – Views
Laravel, Backbone.js + Coffeescript Tutorial Part IX – Coffeescript
Laravel, Backbone.js + Coffeescript Tutorial Part X – Backbone
Laravel, Backbone.js + Coffeescript Tutorial Part XI – Backbone
Laravel, Backbone.js + Coffeescript Tutorial Part XII – Backbone
Laravel, Backbone.js + Coffeescript Tutorial Part XIII – Backbone

Tweet about this on TwitterShare on FacebookShare on Google+Share on StumbleUponShare on TumblrShare on RedditPin on PinterestEmail this to someone