Truth is that I’m still a beginner on this and I’m still learning, but since I have found some resources and did a bit of study, here is what I could gather so far.

To be able to understand fully how backbone.js worked I have decided to do a small compare with CakePHP MVC structure, so I have started an example with the following directory structure:

app

controllers

// extend Backbone.Router

models

// extend Backbone.Model

collections

// extend Backbone.Collection

views

// extend Backbone.View

libs

js

jquery files

backbone.js

underscore.js

bootstrap js files -> these weren’t loaded on the main index.php file because of conflict, couldn’t figure out why so far, but I will look into it

css

bootstrap css files

img

bootstrap img files

index.php

The index file was a simple file that loaded all required scripts and the only requirement is to load the underscore.js file prior to the backbone.js and, off course, loading your controllers, views, models, collections, after these.

The controllers are called “routers” on backbone js. At some given point they were called controllers, but the naming convention were changed because some confusion. In one of the links that I will paste bellow have more info about this.

The views can work just like the CakePHP views, the only real big difference is that the part that render the “view” is under this view file. In another words, the Backbone.View.extend is both a view and a controller renderer.

The models are a bit bigger concept than CakePHP. The models are split in Models and Collections. To explain this better consider that User is a model and Users is a collection of User, so when you do a Users.get it would return all objects from the User model that is stored.

I have just started to scratch the surface from Backbone.js, so don’t take anything for granted, but here are all links that I’m using at the moment as reference. They are helping me, so they might help you as well:

A few weeks after I have 1st written this post I have got an excellent tutorial of how to handle Backbone.js. It is all in Portuguese (Brazil), but with a little Google Translation the tutorial should work perfectly for you.

Like this:

When working on a web application that involves a lot of JavaScript, one of the first things you learn is to stop tying your data to the DOM. It’s all too easy to create JavaScript applications that end up as tangled piles of jQuery selectors and callbacks, all trying frantically to keep data in sync between the HTML UI, your JavaScript logic, and the database on your server. For rich client-side applications, a more structured approach is often helpful.

With Backbone, you represent your data as Models, which can be created, validated, destroyed, and saved to the server.

Like this:

Today I have came by a very strange behavior that was blocking up a dialog to show just prior to the ajax to load. The ajax was binded to a click event and on the ajax beforeSend I had:

$('.dialogModal').dialog();

In theory the beforeSend event will be triggered every time for the ajax call, but, if you have async: false in the ajax call, this will never work for Chrome and IE. Reason is that the beforeSend for both Chrome and IE happens after the ajax is completely done and at that point, my afterSend took over and closed the dialog.

Off course changing it to async: true will make the dialog to open immediately, but it is not on every ajax request that you want to make it async: true. Take for example when you really want block everything else until the element is fully loaded.

Anyway, there are several ways to solve the issue but if async:true works for you, that is all you need to do.

Like this:

I have been messing with the FB API’s for a while to get that counter customized for us. The more I messed with the API’s the more I got the feeling that FB is not quite sure what is doing.

The Javascript API that we seen is the new Javascript API and it seems it is on Alpha release. The good thing is that with it we wont need anymore that .htm verification file for running cross-domain javascripts, but the bad part is that currently Goal uses for the fan badges the old javascript API.

I found a comment saying that if we are currently wanting to use the new API (Javascript SDK) we should fully remove the old references from the site and since it is on Alfa release the data functionality are still not ready. Besides this I was getting error after error when using the new API even after removing all old references from the application.

The best way to keep track of the Javascript SDK from Facebook is by following the issues list at: http://github.com/facebook/connect-js and by checking on the FAQ. There is a lot of good information there.

Just a note, the Wiki is being deprecated. All the information that we should look are under the developers.facebook.com/docs.

Playing with the API’s, I have created a custom AJAX call using JQuery and JSONP. the JSONP allows a cross-domain request from Jquery AJAX and with that I was able to correctly execute a query using FQL.

There is one annoying bug that I could go through with the new SDK, the SDK wont bootstrap giving an error at line 3. I think is related to cookies and the old API. I will still give a search on that and when I find the solution, I will place it here as an update.

Like this:

I was playing a little bit with the Facebook connect functionality and the XFBML and I got a strange error, every time that the API XFBML loaded the first time (Apache header 200), it did renders properly the fb-login button, but whenever it was being brought from the cache (Apache header 304) it did not render the button at all.

It did take me a lot of testing to get to this conclusion, and even to confirm if it was a javascript load time issue, I had it wrap up in a JQuery $(document).ready function so it would load properly. This did improve the issue (by 50%) but it did not solve it.

The solution found was to create my own FB login button and functionality (thx Rob) using the Facebook js functionality. Basically the script, under a FB.ensureInit function, will check if the user is connected and if so, redirect, otherwise it will check for the status (FB.ConnectState) and create a button based on that (login or logout).

Pasting the code here would not make much sense since it is very specific to the application, but the workaround concept is basically the same.