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

Question

我目前正在将 javascriptbone.js 视图转换为 coffeescript，但它无法正常工作。

我工作的原始 Javascript 视图是

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;
});

我的咖啡脚本视图是

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

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

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

Test

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

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

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

Answer 1

当它只是一个普通的局部变量时，您将 mainHomeTemplate 引用为实例变量（@mainHomeTemplate，与 this.mainHomeTemplate 相同）。你想要：

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

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

当我在这里时，您应该让 Backbone 为 el 处理 jQuery 内容，并且您的视图已经有 @$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