backbone.js如何与CoffeeScript一起使用?

时间:2012-07-31 14:16:11

标签: backbone.js coffeescript integration

使用CoffeeScript编写backbone.js应用程序是否存在任何固有问题?您是否遇到了一些无法解决的问题或者必须使用某些特别笨重的解决方法?

3 个答案:

答案 0 :(得分:6)

没问题,真的。至少,没有一个不容易解决。

使用CS的问题与使用CS在任何地方可能遇到的问题相同:

  • 调试仍在生成的JS中完成
  • CS需要一个有时难以处理的预处理步骤
  • 您团队的其他成员可能不知道CS
  • 关于CS有一些奇怪的事情(他们介绍“类”,但它们不是真正的类)

此外,由于Backbone dev与Coffeescript是基于“类”的,你发现自己想要在不同的文件夹中将你的类分成单独的文件。因此,您可能会遇到无序定义类的情况。例如,您的集合可能会在模型之前定义,但这不可能发生。为此,我建议使用可以管理依赖项(导入)的东西。我使用coffee-toaster但是还有其他几个选项(例如,Rails在资产管道中内置了依赖关系管理)

这是我编写Backbone代码的首选方法。在我看来,Backbone.js开发实际上在CoffeeScript中比在Javascript中更好。对我来说,他们像巧克力和花生酱一样。 (不是每个人都喜欢巧克力/花生酱......不是每个人都喜欢BB / CS)

类语义 骨干开发在很大程度上依赖于扩展原型,这是使用CoffeeScript内置的东西。那么,您将在JS中扩展View:

App.Models.MyModel = Backbone.View.extend({
    render: function() {
        ...
    }
});

CS替代方案是本机体验:

class App.Models.MyModel extends Backbone.Model
    render: ->
        ...

覆盖功能 你经常在Backbone中做的一些事情,比如重写函数变得简单得多。在Javascript中:

constructor: function ( attributes, options ) {
    this.constructor.__super__.constructor.apply( this, arguments );
    ...
}

变为:

constructor: (attributes, options) ->
    super

“此”上下文绑定 当需要声明函数的上下文是“this”

时,CS中的“胖箭头”非常有用

当函数被回调时,Javascript以不同的方式设置'this'。有几种方法可以解决它,但开箱即用,它很尴尬:

initialize: function() {
    this.model.bind('reset', this.render);
},

render: function () {
    this.$el.html("<ul></ul>");
    this.model.each(this.renderItem); // <--- Fails on "reset" because 'this' is wrong
    return this;
}

CoffeeScript具有=>标记,当任何人调用该标记时,该标记会自动将“this”绑定到该函数:

initialize: ->
    @model.bind 'reset', @render

render: =>
    @$el.html '<ul></ul>'
    @model.each @renderItem  # The fat arrow fixed it for you
    @

完成所有操作后,Backbone.js代码更容易编写,并且在CS中编写时更容易阅读。至少,这是我的看法。

祝你好运!

答案 1 :(得分:3)

CoffeeScript和Backbone.js都是由同一作者(Jeremy Ashkenas)编写的。 backbone-on-rails gem默认生成CoffeeScript。虽然某些插件(例如你提到的Backbone-relational)可能需要额外的设置,但Backbone本身可以很好地使用CoffeeScript。

答案 2 :(得分:2)

CoffeeScript只是JavaScript之上的语法层。它本质上是JavaScript。您可以在JavaScript中执行的任何操作都可以在CoffeeScript中重现。