3

我正在尝试使用 Jasmine（带有 yaml 配置的宝石）来测试 Backbone.js 应用程序。我正在使用像Todo 示例这样的下划线模板。

template: _.template($('#item-template').html())

我的问题是我无法在我的模型/视图之前加载模板，因此模板调用会导致这些类在加载时出错。

我已经阅读了有关 jasmine-jquery 插件来做固定装置的信息，但问题是我的 src 文件（模型/视图）在我得到规范文件并能够设置所需的固定装置之前就被加载并失败了。

如何让模板足够早地加载，它们可以用于重置我的类？

4

2 回答 2

5

您可以延迟 jQuery 选择器，直到您需要它：

render: function(){
  var templateHtml = $(this.template).html();
  _.template(templateHtml);
}

或者您可以在视图初始化时运行选择器：

initialize: function(){
  this.template = _.template($(this.template).html());
}

或者，如果您真的想保留代码原样并在定义视图时让选择器评估，您可以将所有 Backbone 代码包装在一个函数中，当您想要初始化整个应用程序代码时调用该函数......例如$(function(){}真实 HTML 页面上的 jQuery 函数，或beforeEachJasmine 测试中的函数：

MyApp = (function(){
  var myApp = {};



myApp.MyView = Backbone.View.extend({
    template: _.template($("#item-template").html())
    // ...
  });



return myApp;
});

然后在您的应用程序中，启动它：

$(function(){
  var myApp = MyApp();
  new myApp.MyView();
  // ...
});

在你的茉莉花测试中：

describe("how this thing works", function(){
  beforeEach(function(){
    var myApp = MyApp();
    this.view = new myApp.MyView();
    // ...
  });
});

一旦你有了这些解决方案之一，你就可以使用 Jasmine-jQuery 之类的东西来加载你的固定装置。

FWIW：我倾向于根据需要结合使用这些技术。

于 2011-10-24T17:25:53.230 回答
1

已接受答案的第一部分的一个问题是每次实例化视图时都会编译模板。一种替代方法是直接在视图的原型上设置模板：

app.TodoView = Backbone.View.extend({
    initialize: function(){
        if (!app.TodoView.prototype.template) {
            app.TodoView.prototype.template = _.template($("#item-template").html());
        }
    }            
});

这样，模板在实例化的第一个实例时编译一次TodoView。

于 2013-02-25T01:24:50.657 回答