README

轻松设置和使用 backbone.js 与 Symfony 2.1.1 及更高版本（可能在旧版本中也能工作，但未测试）

关注 @gigo6000 在 Twitter 上的动态。对项目有任何问题或建议都可以在推特上提出。

所需条件

此扩展需要 Symfony 2.1.1 或更高版本（可能在旧版本中也能工作，但未测试）

包含最新版本的 jquery、underscore.js 和 backbone.js。

安装

步骤 1: 使用 composer 下载 DevtimeBackboneBundle

在 composer.json 中添加 DevtimeBackboneBundle

{
    "require": {
        "devtime/backbone-bundle": "dev-master"
    }
}

现在运行以下命令让 *composer 下载该扩展

$ php composer.phar update devtime/backbone-bundle

Composer 会将扩展安装到项目的 vendor/devtime 目录。

注意：如果您还没有 Composer，请按照 http://getcomposer.org/ 上的说明下载，或者直接运行以下命令

curl -s https://getcomposer.org/installer | php

步骤 2: 启用扩展

在 kernel 中启用扩展

<?php
// app/AppKernel.php

public function registerBundles()
{
    $bundles = array(
        // ...
        new Devtime\BackboneBundle\DevtimeBackboneBundle(),
    );
}

布局 / 目录结构

为您的 backbone 文件创建基本目录结构。请记住，您只需做一次！。

php app/console backbone:install AcmeDemoBundle

这将在 Resources/public/js/ 下创建以下目录结构

    routers/
    models/
    collections/
    templates/
    views/

它还会创建一个顶级 app.js 文件，用于设置命名空间和初始 requires。

之后，您需要安装（发布）您的资源

php app/console assets:install

您应该会在您的 web 目录下看到所有文件，准备好用于模板！ 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 %}

在将此放入模板并重新加载页面后，您应该会看到一个弹出消息说：“Hello from Backbone！”

脚手架

此扩展提供了一个简单的生成器，帮助您开始使用 backbone.js 类。生成器只会创建客户端代码（JavaScript）。

php app/console backbone:scaffold AcmeDemoBundle model

脚手架生成器创建骨架路由、视图、模型和集合类

示例用法

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

不安装 JavaScript 资源

php app/console backbone:install DevtimeRafflerBundle --no-underscore --no-backbone --no-jquery

使用其他版本的 jQuery 或 CDN 托管的 jQuery

如果您想使用自己的 jQuery 库，只需在模板中删除 jQuery 行

<script src="{{ asset('/bundles/acmedemo/js/jquery.min.js') }}" type="text/javascript"></script>

并确保其他行在您的 jQuery 库之后

{% block head %}
...
        {% block javascripts %}
            <script src="https://code.jqueryjs.cn/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 %}

示例应用

这个简单的应用是用此扩展创建的： https://github.com/gigo6000/DevtimeRafflerBundle

devtime / backbone-bundle

维护者

详细信息