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

In this part we’ll start some backbone stuff, and I will be using coffeescript to write and explain what each backbone code does, so I assume you have some understanding of both coffeescript syntax and also concepts of Backbone.js, What I will try to do is show you how to use these to build the application, of course I will explain things as we move on and things that I found hard to understand as a beginner.

Backbone is a library, so you can use it as you want most of the time, but that doesn’t mean it’s the right way to do, but I will show you how I adopted it to use. In Backbone you have three major components; Model, Collection, and View. Model can be used to represent any data model you receiving or sending back to server. This could be actual representation of your data model in server side or it could be a proxy (data transfer object) where you convert appropriately at the server side. Model also can be something temporary, something you want to represent UI data object, such as search criteria parameters that user enters on search panel. Collection is simply a array of Models but organized in better easy to handle structure, on top of that Collection provides rich set of functions to manipulate it’s data. What I normally do in order to see what Collection is capable of doing is by visiting http://backbonejs.org/#Collection and check the documentation. As you can see it also provides functionalities given by Underscore.js, which means you can do whatever you can think of on collections to manipulate data.

A sip of Coffee with Laravel and Backbone - Book

 

Functions of Backbone.js Collection

Functions of Backbone.js Collection

Both Model and Collection are easy to understand and work with. I found View is bit difficult to understand at the beginning, but as you implement few views and play with those you will realize how easy it is. One important thing to remember is, View could be used to represent any part (DOM element) of your entire page, a View can be nested inside another View. If you follow correct guide lines of View, particular View should only see what is relevant and assigned to it. (But of course you can access any part of your HTML DOM using jQuery selector, but it is not a good practice doing so). Then the question is how to notify other Views about any changes; those should be sent via events of Models and Collections. You will understand this very well as we progress through the tutorial. Finally the Router, it will help you to organize the flow of your functionality within a single page. For ex: if you’re planning to show category add/edit/delete UI on same page as well as when user wants to edit/add/delete products then UI should be switched to represent views/models/collections related to products. This switch can be done by the Router, moreover it can be configured to switch based on URL that is entered in browser url box. However in this tutorial we will not go deep into Routers.

As I do with any implementation, I like to define some Base classes (as we did in server side PHP classes) so that we can move common functionality to those and re-use. Even in Backbone.js I’d like to do the same, and after I complete this series I may show you how to generalize those classes even further in future one so that you can easily build similar UI to handle different datasets with very few lines of code, Just by inheriting from these general classes and following some HTML id/class naming convention.

Here’s how we’re going to structure our coffee files to define Backbone classes. First I will use ‘base.coffee‘ file we created last time to define base classes. Then under ‘public/coffee/category‘ folder I will add three more files (‘category.coffee‘ is already there if you remember) ‘models.coffee‘, ‘collections.coffee‘, and ‘views.coffee; as their names imply I’ll use them to define Backbone Models, Collections, and Views used to deal with functionality related to categories. So now you should have file structure as in image below.

Coffeescripts for Backbone.js

Coffeescripts for Backbone.js

As you know if you compile these coffeescripts as in previous post. You will get javascripts with same structure. Then what you have to do is include them in ‘application/views/category/index.blade.php

Please note the order of files, we need to have models first then collections then views and finally category.js because of their dependencies to each other.

Step 1 – Writing Base Classes

Having all that setup crrectly, let’s write our base classes in coffeescript. Open ‘base.coffee’ in your editor and write following, I’ll explain what it does next.

Now here we have defined four classes, BaseModelBaseCollectionBaseViewand BaseRouter. This is how you define classes using coffeescript and as you see all these are extended (inherited) from corresponding Backbone classes. Why do I do this? Because I need to inherit all my models, collections views routers from these base classes not directly from Backbone.js classes so that I could add more common functionality into these later on.

As you see sometimes I need to see JSON representation of my models, for that I have defined a function called ‘dump()’ in BaseModel and BaseCollection, so any class inherited from any of these two will have this method automatically, and it is easy to check it in browser developer tool –>console. Also note that in coffeescript you define method using following syntax.

Also @ represents ‘this’ in Javascript. so what I have actually written inside dump() method is

Also remember in coffeescript, last line will be always a return statement when it is compiled into javascript.

I have done the same implementation for BaseCollection, for BaseView there are no methods yet but will add few as we progress. Neither for BaseRouter but who knows what would come.

Finally from Line 14 to 18. I have exposed these classes to global level so that other scripts can use them. First in line 14 I check whether ‘window’ has ‘app’ object, if not create empty one, and then assign my class definitions to ‘app’ in following lines. I used to do this at the end of every coffeescript so my classes are visible to outside.

Now compile your coffeescripts (if you don’t remember how to do that, open terminal and go to ‘lbc/public/’ and issue  coffee –-compile –-output  js/ coffee/)

Now you will see the corresponding javascript is generated.

You can see that we save lot of typing and mistakes by just using few lines of coffeescript.

Step 2 – Test Our Classes

As we have already included ‘base.js’ in ‘_main.blade.php’ we should be able to access these objects in developer tool console of the browser. Let’s check that out. Open your browser (prefer Chrome) and access ‘http://lbc.dev/category’  Press F12 to get Developer tool window and check elements to see you have javascript files you included.

Verify Javascript files included

Verify Javascript files included

Click small ‘Show Console’ icon at the bottom. and type following

Testing Base Class Functionality

Testing Base Class Functionality

We created an instance of BaseModel and assign some data to it. and call our dump() function. Yes it works.

Also will check whether this is actually inherited from Backbone.Model by calling some functions provided by Backbone.Model

Verify Backbone Inheritance

Verify Backbone Inheritance

 

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