我通过CodeKit工具使用Backbone.js和Coffeescript工具。使用Coffeescript和CodeKit在不同文件中设置骨干应用程序
到目前为止,我一直在一个文件中包含所有内容。但我想开始分离它们。在进入AMD和require.js之前,我想尝试一些简单的东西。
例如,我想关注你在
建议既然我使用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” 等等它们被编译成单个文件。
当我运行它,我得到 “查看” 没有定义。
现在,我在这里尝试了各种组合。例如,我尝试使用“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);