我如何使用来自 symfony 的数据初始化我的单页 backbone 应用程序

Question

我正在寻找解决方案，但没有成功。

我有一个 Symfony2 站点，一个页面加载一个 backbone 应用程序，如下所示：

{% extends "AcmeCardBundle::layout.html.twig" %}


{% block content %}
    <div id="main_container"></div>
{% endblock %}

{% block javascripts %}

    <script>
       var idfoo = "foo";
    </script>

    {% javascripts
    '@AcmeCardBundle/Resources/public/js/vendors/require.js'
    '@AcmeCardBundle/Resources/public/js/boot.js'%}
    <script type="text/javascript" src="{{ asset_url }}" data-main="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}

{% block stylesheets %}
    {% stylesheets 'bundles/acmecard/css/screen.css' filter='cssrewrite' %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

此代码使用 Requirejs

加载我的 boot.js

    requirejs.config({
        baseUrl: 'http://localhost/symfony2/web/bundles/acmecard/js',
        paths: {
            jquery: 'vendors/jquery',
            underscore: 'vendors/underscore',
            backbone : 'vendors/backbone'
        }
    });

    // Start the main app logic.
    requirejs(['jquery','underscore','backbone', 'app/app','app/router' ],
        function   ( $,  _  ,  Backbone, app ) {

            $(document).ready(function () {

                console.log(window.idfoo);

                app.initialize();
            });
        }
);

我的问题可能很愚蠢，但我不明白如何从 Backbone 中的 Symfony2 访问 var window.idfoo 。我的方法不行...

谢谢

Answer 1

一点也不傻。虽然我无法帮助您处理 backbone 本身，但我在处理 AngularJS 时遇到了类似的问题。尽管如此，分辨率基本上是一样的。

我是这样解决的：

<script>
    window['myBackboneApp'] = {
        var1: 'foo',
        var2: 'bar'
    }
</script>

然后在您的 boot.js 中直接引用 window['myBackboneApp']。

我不确定这是否是处理此问题的正确方法。例如，直到最近，我发现 Angular 中有一种方法可以将属性传递给控制器。也许 backbone.js 也有类似的东西？

Answer 2

我找到了解决问题的方法

在我的 twig Symfony 中，我像这样放置 require init

{% block javascripts %}
    {% javascripts
    '@AcmeCardBundle/Resources/public/js/vendors/require.js'%}
    <script type="text/javascript" src="{{ asset_url }}" data-main="{{ asset_url }}"></script>
    {% endjavascripts %}

    <script type="text/javascript" >
        requirejs.config({
            baseUrl: 'http://localhost/symfony2/web/bundles/acmecard/js',
            paths: {
                jquery: 'vendors/jquery',
                underscore: 'vendors/underscore',
                backbone : 'vendors/backbone'
            },
            config: {
                'app/app': {
                    user: '{{ app.user.username }}'
                }
            }
        });

        // Start the main app logic.
        requirejs(['jquery','underscore','backbone', 'app/app','app/router' ],
                function   ( $,  _  ,  Backbone, app ) {

                    $(document).ready(function () {
                        app.initialize();
                    });
                }
        );

    </script>

{% endblock %}

如您所见，有一个配置参数，您可以在其中为模块定义一些变量（此处 app/app）。在这个例子中我定义了一个用户。

然后在app/app.js

define(function (require, exports, module) {

    var initialize = function() {
        console.log(module.config().user);
        Backbone.history.start();
    };

    return {
        initialize: initialize
    };

});

我们必须添加一些参数，它起作用了。

希望对您有所帮助

我如何使用来自 symfony 的数据初始化我的单页 backbone 应用程序

How can i init my single page backbone app with data from symfony

javascript

symfony

backbone.js