Question

我目前正在将javascript backbone.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;
});

我的coffeescript视图是

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

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

1 个答案: