2012-06-04 17 views
0

我通过CodeKit工具使用Backbone.js和Coffeescript工具。使用Coffeescript和CodeKit在不同文件中设置骨干应用程序

到目前为止,我一直在一个文件中包含所有内容。但我想开始分离它们。在进入AMD和require.js之前,我想尝试一些简单的东西。

例如,我想关注你在

Backbone.js:separate the view ,collection,model to different js file,they could't recognize each other

建议既然我使用CodeKit其中有一个选项为“追加”(或进口)被别人引用的JS文件,我我认为这很好地将所有内容放入一个文件中。

所以这里是我想要实现的。

  • 在一个单独的文件“View.coffee”视图文件
  • 在一个单独的文件路径文件“App.coffee”

而且所拥有的一切经由CodeKit编译成App.js将视图文件“导入”到App.coffee中。

在我看来

,我有我的控制器以下

$ -> 

    class View extends Backbone.View 

    el:"#view" 

    initialize: => 
     console.log app 

$ -> 

    class App extends Backbone.Router 

    view : new View 

    routes: 
     "" : "home" 

    search: => 
     console.log "hi" 

    app = new App 
    Backbone.history.start() 
我CodeKit

现在,我输入 “View.coffee” 到 “App.coffee” 等等它们被编译成单个文件。

"App.coffee" has "View.coffee" imported

当我运行它,我得到 “查看” 没有定义。

现在,我在这里尝试了各种组合。例如,我尝试使用“window.View”和“window.App”将它们分配到全局名称空间中,但这并不成功。我可以让应用程序读取视图,但无法使用视图读取应用程序。

设置它的最佳方法是什么?还是我做对了?还附加最终的JS输出。

// Generated by CoffeeScript 1.3.1 
(function() { 
    var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }, 
    __hasProp = {}.hasOwnProperty, 
    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; }; 

    $(function() { 
    var App, app; 
    App = (function(_super) { 

     __extends(App, _super); 

     function App() { 
     this.search = __bind(this.search, this); 
     return App.__super__.constructor.apply(this, arguments); 
     } 

     App.prototype.view = new View; 

     App.prototype.routes = { 
     "": "home" 
     }; 

     App.prototype.search = function() { 
     return console.log("hi"); 
     }; 

     return App; 

    })(Backbone.Router); 
    app = new App; 
    return Backbone.history.start(); 
    }); 

    /* -------------------------------------------- 
     Begin View.coffee 
    -------------------------------------------- 
    */ 


    $(function() { 
    var View; 
    return View = (function(_super) { 

     __extends(View, _super); 

     function View() { 
     this.initialize = __bind(this.initialize, this); 
     return View.__super__.constructor.apply(this, arguments); 
     } 

     View.prototype.el = "#view"; 

     View.prototype.initialize = function() { 
     return console.log(app); 
     }; 

     return View; 

    })(Backbone.View); 
    }); 

}).call(this); 

回答

6

当你这样做:

$ -> 
    class View extends Backbone.View 
    #... 

你包装一下你View定义的函数(实际上有两种功能:$()通话和平常CoffeeScript的包装功能)内,因此View变量不该功能以外的任何内容均可访问即使CodeKit避免使用外部的CoffeeScript包装函数,您仍然可以使用要添加的$()函数。结果是你的课程无法看到对方。

最简单的解决方法是申报一个应用程序级别全局可访问的命名空间:

window.app = { } 

,然后宣布该命名空间内的类:

$ -> 
    class app.View extends Backbone.View 
    #... 

的话可以参考该视图app.View哪里你需要它。类似的东西将适用于您的路由器,模型和支持类。

相关问题