new
To scaffold out new backbonejs app run this command
backbone_generator new app_name
model
To create a model do
backbone_generator model model_name
view
To create a view do
backbone_generator view view_name
route
To create a route do
backbone_generator route route_name
collection
To create a collection do
backbone_generator collection collection_name
utility
To add a utility to your project run this command
backbone_generator utility utility_name
library
To create add a new javascript library to your project run this command
backbone_generator library library_name
server
To start a server run this command
backbone_generator server {optional port number}
The default port that server starts on is 5000, conditionally you can specify a different port number
Example Heading
Some Description about the example if needed
The Markup
<ul class="thumbnails"> <li class="span4"> <a href="#" class="thumbnail"> <img src="http://placehold.it/360x268" alt=""> </a> </li> .... </ul>
CSS
thumbnails {
margin-left: -20px;
list-style: none;
*zoom: 1;
}
.thumbnails > li {
float: left;
margin-bottom: 18px;
margin-left: 20px;
}
...
Installation Notes
From your command lline type:
$ gem install backbone_generator
Out the box, the generator includes the following javascript libraries
if you have a model type name “Person”, a collection type named “Persons”, and a view to represent a single person or a collection of persons, what do you call that view? If you’re organizing things by type, you can call every “Person” and “Persons” This can be very confusing. I was recently working with a client who was using an editor that only shows the file name for the open files, and none of the folder path for the files. He ended up with 4 “person.js” files in his open file list. Which one was the Person model, view, router, or controller file? We had to open each file to find the one we needed, every time. So, we took the hit on the file names. The “person.js” file contained the person model, while “persons.js” contained the collection, “personviews.js” contained the view definitions and “personrouter.js” contained the router. Thus, we’ve moved the need for specifying the object type from the folder structure (with all it’s bad ideas for using that) to the file name.
A tutorial on how how to use the gem
To get started we first need to run the new command with the name of our
project. The plugin would generate a number of boiler plate code for you and also initialize
your project as a git repository. The plugin also includes JQuery, Requirejs, Underscore,
and Backbone.js. Below is what the expected output should look like.
Next, we need to navigate into our application, in my case the command it is ~$cd MyApp , before
we start modifying or changing anything in our project, I think it is good idea for us to view what was generated
in our favourite web browser. The plugin ships with a command to start a server in our project. We can pass the
server flag to our gem and have it start the server. The default port it runs on is 5000.
You can pass in port number if you are using port 5000 for something else. Below is what you should see
From your browser navigate to 0.0.0.0:5000. The generated page should look similar to this
Great, looks like everything is working as expected, now we need to roll our sleeves and get ready to write some code. Open the project with your favourite text editor (VIM *wink), you should see something similar to this
-
The file
app.jsis the one that contains the code for initializing our application. It also defines the paths to our libraries, among other things it does is initialize our routes. Finally our application's main utility is loaded in the file. -
The file
Main.View.jsis the first view that gets initialized, this means that if we want any view to be run the first time that the applications starts up, that is where we specify it. If we take a look at it its current content we notice that we are loading and also initializing theHello.Viewof our application -
If we take a look at the file
Hello.View.jswe notice that the associated template for this view has been included for us. Another observation from this file is theelrefrence that we have. The divhello_divis defined in ourindex.htmlfile, this allows us to target that section of the page for including our compiled template. Please note that when you generate a view, the plugin also generates an associated template for you.
-
The file
Route.js
-
The file
Hello.Collection.js
-
The file
Hello.Model.js
-
The file
Main.Utility.js
Roadmap
For more up-to-date information on release dates for these versions, please refer to the project Milestones.
| Version | Description |
|---|---|
| 0.0.4 | Description about this version goes here |
| 0.0.3 | Description about this version goes here |
| 0.0.2 | Description about this version goes here |
| 0.0.1 | Description about this version goes here |
Changelog
CSS Changes
- Some description about the changes
- Some description about the changes
- Some description about the changes
- Some description about the changes
- Some description about the changes
Javascript Changes
- Some description about the changes
- Some description about the changes
- Some description about the changes
HTML Changes
- Some description about the changes
- Some description about the changes
- Some description about the changes
- Some description about the changes
- Some description about the changes
Javascript Changes
- Some description about the changes
- Some description about the changes
- Some description about the changes
HTML Changes
- Some description about the changes
- Some description about the changes
- Some description about the changes
- Some description about the changes
- Some description about the changes
Javascript Changes
- Some description about the changes
- Some description about the changes
- Some description about the changes