骨干视图不会加载JST

时间:2012-08-14 15:42:52

标签: javascript backbone.js coffeescript jst

我有一个使用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”依赖本身将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()

5 个答案:

答案 0 :(得分:1)

当加载有问题的模块时,没有可用的变量JST

您需要将JST图书馆的路径添加到paths中的require.config - 属性。

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

在require.js中,当您在未使用

的模块中使用某些外部资源时,您的警报响铃应该开始响铃

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

B中。通过该模块内的require导入

℃。在require.config -function

中提及

更新

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

JST

然后在模块中使用这些模板:

define([
  ...
], function( ... ) {

  var JST = {};

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

  ...

  return JST;
}

答案 1 :(得分:1)

我遇到了类似的问题。我在Backbone View中出错:

  

未捕获的ReferenceError:未定义JST。

我已经做了以下工作:

  1. 在我的config / requirejs.yml中,我坐着:

    modules:
        - name: "products/product_price_tmpl"
    
  2. 我的观点定义:

    define ['jquery', 'underscore', 'backbone', 'products/product_price_tmpl'] , ($, _, Backbone) ->
    
    Backbone.View.extend
    
        template: JST['products/product_price_tmpl']
    
        tagName: 'li'
    
        render: ->
            @$el.html(@template(@model.attributes))
            @
    
  3. 我的所有模板都在assets / templates目录中。如果requirejs在此目录中找到模板有问题,可以将templates目录移动到assets / javascripts文件夹中,或将此行添加到config / application.rb文件中:

    config.assets.paths << "#{Rails.root}/app/assets/templates"  
    

答案 2 :(得分:0)

我正在使用Backbone Boilerplate将模板编译成一个名为templates.js的文件。 JST在templates.js中定义。使用templates.js配置路径解决了这个问题。

答案 3 :(得分:0)

虽然Jason Swett正在使用AMD / require.js,因为问题标题并不具体,我认为我代表CommonJS / Browserify用户回答,因为我在谷歌搜索同样的问题之后就到了这里

将我的Backbone应用程序移动到Browserify之后,得到了一个未定义错误&#34; JST&#34;。 wawka上面的回答帮助我对事情进行了分类。

我之前:

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

现在我有:

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

希望这对别人有所帮助。

答案 4 :(得分:0)

指定正确的装货顺序

<强> require.config

require.config({
    paths: {

        // specify templates
        templates: 'compiled-templates'
    }
})

// firstly load templates
require(['templates'], function() {

    // then load you app
    require(['core/Core']);
});