javascript - 使用 Coffeescript 在 Backbone.js 中定义 HTML 模板

Question

我目前正在将 javascript backbone.js View 转换为 coffeescript，但它无法正常工作。

我工作的原始 Javascript View 是

define([
  'jquery',
  'underscore',
  'backbone',
  'text!templates/dashboard/main.html'
], function($, _, Backbone, mainHomeTemplate){

  var Test = Backbone.View.extend({
    el: $("#page"),
    render: function(){
      this.$el.html(mainHomeTemplate);
    }
  });
  return Test;
});

我的 coffeescript View 是

define [
  'jquery',
  'underscore',
  'backbone',
  'text!templates/dashboard/main.html'
], ($, _, Backbone, mainHomeTemplate) ->

Test = Backbone.View.extend
    el: $ '#page'

    render: ->
        $(@el).html @mainHomeTemplate

Test

当我尝试初始化测试 View 时，我得到它说测试未定义。

app_router.on('route:defaultAction', function (actions) {
      require(['views/dashboard/testnew'], function(Test) {
        console.log(Test)
        var test = new Test();
        test.render();
       });

任何帮助将不胜感激。谢谢

Answer 1

当它只是一个普通局部变量。你想要:

Test = Backbone.View.extend
    el: $ '#page'

    render: ->
        $(@el).html mainHomeTemplate # <-------- No '@' on 'mainHomeTemplate'

当我在这里的时候，你应该让 Backbone 为 el 处理 jQuery 的东西，你的 View 已经有 @$el (假设您使用的是最新版本的 Backbone)因此您不必 $(@el):

Test = Backbone.View.extend
    el: '#page'
    render: ->
        @$el.html mainHomeTemplate

我假设您的 define 函数中缺少缩进也只是一个复制/粘贴错误；您必须非常小心 CoffeeScript 中的缩进，在将 CoffeeScript 代码粘贴到问题中时更是如此。您还可以使用普通的 CoffeeScript 类机制代替 Backbone.View.extend。您的最终结果应如下所示:

define [
  'jquery',
  'underscore',
  'backbone',
  'text!templates/dashboard/main.html'
], ($, _, Backbone, mainHomeTemplate) ->

    class Test extends Backbone.View
        el: '#page'

        render: ->
            @$el.html mainHomeTemplate

    Test