骨幹和requireJSe錯誤：404裝載模板

Question

時找不到我得在控制檯以下錯誤消息：

http://localhost/web/js/text.js 
404 Not Found 

如果刪除的文字！在 「！文本模板/收集/ indexTemplate.html」 形式collector_index.js，我已經得到了以下錯誤消息：

http://localhost/web/js/templates/collector/indexTemplate.html.js 
404 Not Found 

main.js

require.config({ 
    paths: { 
     html5shiv: "libs/html5shiv", 
     jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min", 
     jqueryui: "http://code.jquery.com/ui/1.10.3/jquery-ui", 
     tablesorter: "libs/jquery.tablesorter.min", 
     script: "script", 
     underscore: "libs/underscore.min", /*"http://underscorejs.org/underscore",*/ 
     backbone: "libs/backbone.min", /*"http://backbonejs.org/backbone-min",*/ 
     utils: "utils", 
//  Collector 
     collectorModel: "models/collectorModel", 
     collectorCollection: "collectorCollection", 
     collectorRouter: "collectorRouter", 
     // Views 
     index: "views/collector/collector_index", 
     row: "views/collector/collector_row", 
    }, 
    shim: { 
     jqueryui: { 
      deps: ["jquery"], 
      exports: "Jqueryui" 
     }, 
     tablesorter: { 
      deps: ["jquery"], 
      exports: "TableSorter" 
     }, 
     script: { 
      deps: ["jquery"], 
      exports: "Script" 
     }, 
     underscore: { 
      exports: "_" 
     }, 
     backbone: { 
      deps: ["underscore", "jquery"], 
      exports: "Backbone" 
     } 
    } 

}); 

require(.... 

indexTemplate.html

<script type="text/template" id="indexTemplate"> 
    <table class="tables"> 
     <thead> 
     <tr> 
      <th>Name</th> 
      <th>Role</th> 
     </tr> 
     </thead> 
     <tbody></tbody> 
    </table> 
    <a class="btns" href="#collector/new">New Collector</a> 
</script> 

collector_index.js

define([ 
    "backbone", 
    "underscore", 
    "row", 
    "text!templates/collector/indexTemplate.html" 
], function (Backbone, _, CollectorRowView) { 
    var CollectorIndexView = Backbone.View.extend({ 
     initialize: function (options) { 
      this.collectors = options.collectors; 
      this.collectors.bind('reset', this.addAll, this); 
     }, 

     // populate the html to the dom 
     render: function() { 
      this.$el.html($('#indexTemplate').html()); 
      this.addAll(); 
      return this; 
     }, 

     addAll: function() { 
      // clear out the container each time you render index 
      this.$el.find('tbody').children().remove(); 
      _.each(this.collectors.models, $.proxy(this, 'addOne')); 
     }, 

     addOne: function (collector) { 
      var view = new CollectorRowView({collectors: this.collectors, collector: collector}); 
      this.$el.find("tbody").append(view.render().el); 
     } 
    }); 
    return CollectorIndexView; 
}); 

目錄結構：

js 
    views 
    main.js 
    ... 
    templates 
    collector 
     indexTemplates.html 
    main.js 

謝謝。

Answer 1

不知道這是一個錯字或沒有，但你在define()有indexTemplates.html在收集文件夾和indexTemplate.html。

首先確保您的text.js插件位於main.js所在的相同文件夾中。創建於main.js一個新的條目：

'templates': '../templates' 

模板文件本身可以是一個普通的.html沒有.js擴展，你應該能夠引用它：

var template = require("text!templates/collector/indexTemplate.html") 

或define()如果你喜歡這種方式。