1

I'm tring to write my first Backbone.js app inside my CakePHP app and trying to avoid writing my app in the page directly but to do it on a specific file stored in js/backbone/app.js where I'll put the Backbone app.

My first test was made by writing the app inside the page just to make some test, the problem is that the Model app has default values which came from php data.

Here is the example without including the app.js:

<html>
    <head>
        <title>My app test</title>
        <script type="text/javascript" src="js/backbone/backbone.min.js"></script>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/underscore.min.js"></script>
        <script type="text/javascript">
        var Status = {
            Models: {},
            Collections: {},
            Views: {},
            Templates:{}
        }
        Status.Models.Message = Backbone.Model.extend({
            defaults:{
                icon:"<?php echo $this->App->icon('default-icon-name');?>",
                type:"warning",
                title:"<?php echo __('Default title'); ?>",
                message:"<?php echo __('Default status message text'); ?>"
            },
            initialize:function () {
                console.log("Backbone console message from initialize event");
            }
        });
        // here the rest of the app
        </script>
    </head>
    <body>
        here is the app!
    </body>
</html>

Now I've moved the app inside js/backbone/app.js and I'm not sure how is the easiest way to pass the default parameters of the Model from the page inside my app.js.

Here is the example where I've put all the Backbone app inside the app.js:

$(function(){
    $.ajax({
      url: "http://site.com/json/default_app"
    }).done(function(data) {
        var Status = {
            Models: {},
            Collections: {},
            Views: {},
            Templates:{}
        }
        Status.Models.Message = Backbone.Model.extend({
            defaults:data,
            initialize:function () {
                console.log("Backbone console message from initialize event");
            }
        });
    });
})(jQuery);

Should i put my app for example inside the document ready of jQuery? I hope not, this would force me to create a specific Controller inside my CakePHP app that would be very annoying to keep up to date.

4

1 回答 1

0

所以你基本上有两个选择：

  1. 您可以 PHP 化您的 JS 文件。我不是 PHP 专家，所以我不能告诉你如何做这件事的细节，但本质上你可以修改一些设置来告诉 PHP 处理你的 *.js 文件。如果你这样做了，那么你可以坚持任何你想要的 PHP 逻辑app.js（或任何其他 JS 文件）。

    然而，这种方法将您的 PHP 和您的 JS 代码强耦合，这通常被认为是一个坏主意（出于同样的原因，将您的 PHP 和您的 HTML 大量混合被认为是不好的做法）。因此，我建议...

  2. 您可以将 PHP 部分写入 PHP 页面上的变量，然后在 JS 文件中引用这些变量。

例如，在您的 PHP 文件中，您可以执行以下操作：

<script type="text/javascript">
var YOUR_APP = {};
YOUR_APP.MESSAGE = {};
YOUR_APP.MESSAGE.ICON_SRC = "<?php echo $this->App->icon('default-icon-name');?>";
YOUR_APP.MESSAGE.TITLE = "<?php echo __('Default title'); ?>";
</script>
<script type="text/javascript" src="js/app.js"></script>

然后app.js你可以这样做：

Status.Models.Message = Backbone.Model.extend({
    defaults: {
        icon: YOUR_APP.MESSAGE.ICON_SRC,
        title: YOUR_APP.MESSAGE.TITLE,
    },
    initialize:function () {
        console.log("Backbone console message from initialize event");
    }
});

由于<script>标签的顺序，您不需要任何 onDOMReady 包装。

于 2013-03-24T18:57:07.337 回答