Easily setup and use backbone.js with Symfony 2.1.1 and greater (it probably works in older versions but not tested)
Follow @gigo6000 on Twitter. Tweet any questions or suggestions you have about the project.
This bundle requires Symfony 2.1.1 or greater (it probably works in older versions but not tested)
The latest versions of jquery, underscore.js and backbone.js are included.
Add DevtimeBackboneBundle in your composer.json:
{
"require": {
"devtime/backbone-bundle": "dev-master"
}
}
Now tell *composer to download the bundle by running the command:
$ php composer.phar update devtime/backbone-bundle
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:
curl -s https://getcomposer.org/installer | php
Enable the bundle in the kernel:
<?php
// app/AppKernel.php
public function registerBundles()
{
$bundles = array(
// ...
new Devtime\BackboneBundle\DevtimeBackboneBundle(),
);
}
Create the basic directory structure for your backbone files. Remember that you only need to do this once!.
php app/console backbone:install AcmeDemoBundle
This will create the following directory structure under Resources/public/js/
:
routers/
models/
collections/
templates/
views/
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
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/
// 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!"
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).
php app/console backbone:scaffold AcmeDemoBundle model
The scaffold generator creates skeleton router, view, model and collection classes
php app/console backbone:install AcmeDemoBundle
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
php app/console backbone:scaffold AcmeDemoBundle entry
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
php app/console assets:install
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
php app/console backbone:install DevtimeRafflerBundle --no-underscore --no-backbone --no-jquery
If you want to use your own jquery lib, just remove the jquery line in your template:
<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:
{% 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 %}
This simple app was created with this bundle: https://github.com/gigo6000/DevtimeRafflerBundle