Running an Backbone app as an independent JS appli

Question

currently, I run backbone as the front-end of my rails 3.2 application. I need to migrate it into an independent JS application, as part of my putting it as part of Trigger.io.

It now exists as its own index.html file, referencing the assets folder.

When I open the file, it loads the Backbone modules, but the page remains empty. And when I run fetch() commands, it

So, I got a couple of qns:

---

1) How do I trigger the routes such that it goes to a designated page by default?

I know it gets triggered in Backbone.History.Start, but I am not sure what to do before that.

---

2) The url is "file://localhost/Users/mingyeow/Desktop/index.html"

How do I set the root url manually to use localhost:3000/my web address?

Answer 1

1) To trigger a route change you just need to navigate to a page via a href or JavaScript like window.location. Read up on Backbone Routes but essentially you need to write a function for every 'page'. Each function should take care of rendering the page.

2) This should be very simple. You need a local web server. What I started doing recently is just having a simple Node server. Node is very easy to install and its worth experimenting with. Download a static web server such as this one I made. To use it just put your backbone application in a directory named 'public' and run server.js in node. If you don't want to do this you can run a simple LAMP/WAMP/MAMP installation and set the root of the Apache web server.

Answer 2

// define router
var Router = Backbone.Router.extend({
  routes : {
    'index' : 'indexAction',
    '*default' : '_defaultAction'
  },
  indexAction : function() {
    // this will be executed when user navigate to #index
  },
  _defaultAction : function() {
    // this will be executed when user navigate anywhere else (#XXX)
  }
});

// on document ready
$(function() {
  // initialize router
  new Router();
  // and start history
  Backbone.history.start();
});

You can navigate this way.

Or by clicking the link : <a href="#index"">Index route</a>

---

You can use python server. To start it type in the Terminal:

$ python -m SimpleHTTPServer

And check http://localhost:8000