Backbone Bundle
, (*1)
Easily setup and use backbone.js with Symfony 2.1.1 and greater (it probably works in older versions but not tested), (*2)
Follow @gigo6000 on Twitter. Tweet any questions or suggestions you have about the project., (*3)
What you need
This bundle requires Symfony 2.1.1 or greater (it probably works in older versions but not tested), (*4)
The latest versions of jquery, underscore.js and backbone.js are included., (*5)
Installation
Step 1: Download DevtimeBackboneBundle using composer
Add DevtimeBackboneBundle in your composer.json:, (*6)
{
"require": {
"devtime/backbone-bundle": "dev-master"
}
}
Now tell *composer to download the bundle by running the command:, (*7)
``` bash
$ php composer.phar update devtime/backbone-bundle, (*8)
Composer will install the bundle to your project's `vendor/devtime` directory.
* Note: If you don't have Composer yet, download it following the instructions on
http://getcomposer.org/ or just run the following command:
``` bash
curl -s https://getcomposer.org/installer | php
Step 2: Enable the bundle
Enable the bundle in the kernel:, (*9)
``` php
<?php
// app/AppKernel.php, (*10)
public function registerBundles()
{
$bundles = array(
// ...
new Devtime\BackboneBundle\DevtimeBackboneBundle(),
);
}, (*11)
## Layout / Directory structure
Create the basic directory structure for your backbone files. Remember that you only need to do this once!.
``` bash
php app/console backbone:install AcmeDemoBundle
This will create the following directory structure under Resources/public/js/:, (*12)
``` bash
routers/
models/
collections/
templates/
views/, (*13)
It will also create a toplevel app.js file to setup namespacing and setup initial requires.
After this you need to install (publish) your assets
``` bash
php app/console assets:install
And you should see all the files now under your web dir ready for your template! web/bundles/acmedemo/js/, (*14)
// src/Acme/DemoBundle/Resources/views/layout.html.twig
{% block javascripts %}
<script src="{{ asset('bundles/acmedemo/js/jquery.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('bundles/acmedemo/js/underscore.js') }}" type="text/javascript"></script>
<script src="{{ asset('bundles/acmedemo/js/backbone.js') }}" type="text/javascript"></script>
<script src="{{ asset('bundles/acmedemo/js/app.js') }}" type="text/javascript"></script>
{% endblock %}
After putting this in your template and reloading the page you should see a popup message saying: "Hellow from Backbone!", (*15)
Scaffolding
This bundle provides a simple generator to help you get started with your backbone.js classes.
The generator will only create client side code (javascript)., (*16)
``` bash
php app/console backbone:scaffold AcmeDemoBundle model, (*17)
The scaffold generator creates skeleton router, view, model and collection classes
## Example Usage
``` bash
php app/console backbone:install AcmeDemoBundle
``` bash
Installing backbone for bundle "AcmeDemoBundle"
create /Resources/public/js/collections
create /Resources/public/js/models
create /Resources/public/js/routers
create /Resources/public/js/views
create /Resources/public/js/templates
create /Resources/public/js/backbone.js
create /Resources/public/js/underscore.js
create /Resources/public/js/app.js
create /Resources/public/js/jquery.min.js, (*18)
``` bash
php app/console backbone:scaffold AcmeDemoBundle entry
``` bash
Generating backbone scaffold classes for bundle "AcmeDemoBundle"
create /Resources/public/js/models/entry.js
create /Resources/public/js/collections/entries.js
create /Resources/public/js/routers/entries_router.js
create /Resources/public/js/views/entries/entries_index.js, (*19)
``` bash
php app/console assets:install
Output dir structure
``` bash
src/Acme/DemoBundle/Resources/public/js/
|-- app.js
|-- backbone.js
|-- collections
| -- entries.js
|-- jquery.min.js
|-- models
|-- entry.js
|-- routers
| -- entries_router.js
|-- templates
|-- underscore.js-- views
-- entries-- entries_index.js, (*20)
### Install without javascript assets
``` bash
php app/console backbone:install DevtimeRafflerBundle --no-underscore --no-backbone --no-jquery
Using another jquery version or CDN hosted jquery
If you want to use your own jquery lib, just remove the jquery line in your template:, (*21)
<script src="{{ asset('/bundles/acmedemo/js/jquery.min.js') }}" type="text/javascript"></script>
And make sure the other lines are AFTER your jquery lib is included:, (*22)
{% block head %}
...
{% block javascripts %}
<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="{{ asset('/bundles/acmedemo/js/underscore.js') }}" type="text/javascript"></script>
<script src="{{ asset('/bundles/acmedemo/js/backbone.js') }}" type="text/javascript"></script>
<script src="{{ asset('/bundles/acmedemo/js/app.js') }}" type="text/javascript"></script>
{% endblock %}
{% endblock %}
Sample App
This simple app was created with this bundle: https://github.com/gigo6000/DevtimeRafflerBundle, (*23)
Wallogit.com
