Routing problems with Codeigniter and Backbone.js

Question

Here are the frameworks I am using:

• Codeigniter
• Codeigniter REST API
• Require.js
• Backbone.js

Running the app:

• The htaccess file redirects everything through the Codeigniter index.php file.
• There is a default route setup in Codeigniter to call the "Start" Controller.
• The Start Controller calls the Start View (the only view in Codeigniter ).
• The Start View holds the template for the entire website and makes a call to start Require.js
• Require.js starts up Backbone and app works as expected.

Problem: Routing to other Backbone Views:

• Now I want to route via Backbone to other Backbone "views".
• The problem is when I try to provide a link like "localhost/otherPage" in an HREF the htaccess file fires, and Codeigniter tries to find that controller and I get a 404 generated by Codeigniter.
• I have tried forcing a route in Backbone instead of HREF using `app.navigate("otherPage", {trigger: true});`, but I get the same 404 error generated by Codeigniter.

What direction should I take:

• I would like to continue to use Codeigniter for its RESTFUL API, Models and some special validation features.
• I also want to use Backbone and Require on the front end.
• Can I change the htacess redirect to an index.html file that fires up Require and Backbone. Will the Codeigniter RESTFUL API Controllers still fire properly if I use this approach?
• Do I create a view in Codeigniter for each page and have each page start Require + Backbone a new for each view?
• I will be looking into Node.js very soon. Should I just trash the Codeigniter aspect of the the framework and go whole hog on Node.js?

Any guidance is much appreciated.

Answer 1

If you're not already doing it, you may want to route via Backbone through the hashtag changes (it's his normal behavior, pushState: false), as modifying the hashtag would in no way result in a server call, thus ignoring Codeigniter's router.
In your example, you would want to navigate to localhost/#otherPage.
Then use Codeigniter's router for your ajax REST calls.

Answer 2

Another way to keep your browser from submitting the http request with the HREF link is to just override it with javascript and jquery. Could be useful if you don't want to always use hashtags as Loamhoof suggested.

Example:

$('#linkID').on('click', function(event) {

    event.preventDefault();

    backboneRouter.navigate($(event.currentTarget).attr('href'), { trigger:true });

});