RequireJs文本插件似乎没有将模板加载到DOM中

时间:2012-03-27 11:15:07

标签: backbone.js requirejs

我正在构建一个应用程序,前端有骨干/ RequireJs,后端有node / express。全部用CoffeeScript编写。我无法通过文本正确加载HTML模板文件!插件。

我的配置如下:

  require.config 
    paths:
      app:              'app'  
      jquery:           'libs/jquery-1.7.1'
      jqueryTmpl:       'libs/jquery.tmpl'
      jqueryUI:         'libs/jquery-ui-1.8.18.custom.min'
      underscore:       'libs/underscore.amd'
      order:            'libs/order'
      backbone:         'libs/backbone.amd'
      handlebars:       'libs/handlebars'
      bootstrap:        'libs/bootstrap/js/bootstrap'
      marionette:       'libs/backbone.marionette'
      modelbinding:     'libs/backbone.modelbinding'
      validation:       'libs/backbone.validation'
      jqueryQtip:       'libs/jquery.qtip'
      utils:            'utils'
      jqueryDatatables: 'libs/datatables/jquery.dataTables'
      DT_bootstrap:     'libs/datatables/DT_bootstrap'
      user_maintenance: 'templates/tmpl.user.maintenance'

  require [
      "require",
      "jquery",
      "underscore",  
      "backbone",  
      "order!jqueryTmpl",
      "order!marionette",
      "order!validation",
      "app"
  ]

这是我的一个观点的开头: -

define (require) ->

  Backbone = require 'backbone'
  Backbone.ModelBinding = require 'modelbinding'
  require 'jqueryUI'
  require 'jqueryQtip'

  require '../../scripts/text!user_maintenance.html'
  Utils = require '../../scripts/Utils.js' 

  class UserMaintenanceView extends Backbone.Marionette.ItemView
    template: "#tmpl-user-maintenance"
    className: "row"
    .
    .
    .

如果我查看Chrome开发者工具中的网络标签,则/scripts/templates/tmpl.user.maintenance.html文件已通过GET加载。单击它会显示如此显示的内容。 (为了简洁,我删除了内容,只是HTML)

<script type="text/x-jquery-tmpl" id="tmpl-user-maintenance">

</script>

我没有收到任何脚本错误,但模板没有出现在DOM中,我的视图也没有呈现。如果我只是将HTML模板粘贴到主HTML文件中,并且不尝试使用文本插件加载,一切正常。但我想将模板分成单独的文件。

知道我做错了什么吗?

2 个答案:

答案 0 :(得分:3)

text!插件不会将文本注入DOM,它只加载给定的文件,由您来处理内容。有关详细信息,请参阅http://requirejs.org/docs/api.html#text

答案 1 :(得分:1)

您必须将模板调用中返回的HTML分配/附加到DOM中。

示例:

$('.someClass').html(Template, {}); // where {} === the data object for the template