主干视图不会加载JST

Question

我有一个利用Backbone.js的应用程序。一切都很好，但是最近我将RequireJS添加到我的项目中，这当然使所有的事情都崩溃了，所以我正在定义我的依赖项并使一切再次工作。

我得到的错误是Uncaught ReferenceError: JST is not defined.

我有下面的CoffeeScript视图文件。注意JST行：

define ["app"], (App) ->
  Snip.Views.Appointments ||= {}

  class Snip.Views.Appointments.IndexView extends Backbone.View
    template: JST["backbone/templates/appointments/index"]

    initialize: () ->
      @options.appointments.bind('reset', @addAll)

    addAll: () =>
      @options.appointments.each(@addOne)

    addOne: (appointment) =>
      view = new Snip.Views.Appointments.AppointmentView({model : appointment})
      @$("ul").append(view.render().el)

我的"app“依赖本身具有主干和下划线作为依赖项，所以我不认为问题是主干不存在：

define ["underscore", "backbone"], (_, Backbone) ->
  window.Snip =
    Models: {}
    Collections: {}
    Routers: {}
    Views: {}

当我加载页面时，我得到了Uncaught ReferenceError: JST is not defined。

为了让我的脚本了解JST，我需要做什么？

编辑:这是我的路径和东西，

require
  paths:
    jquery: "jquery-1.7.2.min"
    underscore: "lodash.min"
    appointment: "backbone/models/appointment"
    appointmentIndexView: "backbone/views/appointments/index_view"
    appointmentsRouter: "backbone/routers/appointments_router"
    relational: "backbone-relational"
  shim:
    "underscore":
      exports: "_"
    "backbone":
      deps: ["underscore", "jquery"]
      exports: "Backbone"
    "relational":
      deps: ["backbone"]

requirejs ["appointmentsRouter"], (AppointmentsRouter) ->
  window.router = new Snip.Routers.AppointmentsRouter({appointments: []})
  Backbone.history.start()

Answer 1

在加载相关模块时，没有名为JST的变量可用。

您需要将JST -library的路径添加到require.config中的paths-attribute中。

然后，很可能还需要将其添加到shim中，并使其导出JST。

在require.js中，当您使用模块内部的一些外部资源时，应该会开始敲响警钟。

A.在该模块的define -section中导入

B.通过该模块内的require导入

C.在您的require.config -function中提到的

更新

您需要创建一个新模块(如templates.js)，该模块返回一个变量(例如JST)。

define([
  ...
], function( ... ) {
  
  var JST = {};

  JST['template/name'] = "<div class='my-template'><%= my-content %></div>";

  ...

  return JST;
}

然后，在模块中，要在以下内容中使用这些模板：

define([
  ...
  'path/to/your/JST/module',
  ...
], function(..., JST, ...) {

// Et voilà, now you can use the templates like they should be used

});

Answer 2

我使用主干模板，它将模板编译成一个名为templates.js的文件。JST是用templates.js定义的。使用templates.js配置路径解决了这个问题。

Answer 3

当Jason Swett使用AMD/reques.js时，由于问题标题并不具体，我想我应该代表CommonJS/Browserify用户回答，因为我在谷歌搜索相同的问题后在这里结束了。

在将我的骨干应用程序移动到Browserify之后，它得到了一个“未定义的错误中的JST”。wawka在上面的回答帮助我解决了问题。

在我之前：

JST["path/to/template"]({...});

现在我有：

var template = require("path/to/template");
...
template({...})

希望这对其他人有帮助。