javascript - 主干 View 不会加载 JST

Question

我有一个使用 Backbone.js 的应用程序。一切工作正常，但最近我将 RequireJS 添加到我的项目中，这当然让一切都崩溃了，所以我正在定义我的依赖项并让一切重新工作。

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

我有以下 CoffeeScript View 文件。注意 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”依赖本身有 Backbone 和 Underscore 作为依赖，所以我不认为问题是 Backbone 不存在:

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 库的路径添加到 require.config 中的 paths 属性。

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

在 require.js 中，当你在模块中使用一些尚未使用的外部资源时，你的警钟应该开始响起

一个。在该模块的 define 部分导入

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

});