2016-11-21 46 views
0

我使用text.js加載模板尚未加載的情況下,我在模塊名稱尚未使用RequireJS文本插件

require('text!templates/categories.html') 

得到一個錯誤的錯誤是

Uncaught Error: Module name "text!templates/categories.html_unnormalized2" has not been loaded yet for context: 

有無在模板的需要加載過程中查看我的視圖部分,這是引發錯誤的地方。

項目目錄結構:

js 
    /app 
     .... 
     views/categories 
     templates/categories 
    /lib 
     /jquery 
     /underscore 
     /backbone 
     /text 
    /vendor 
     /jquery-ui 
     /fancytree 

RequireJS CONFIGS:

require.config({ 
    // The shim config allows us to configure dependencies for 
    // scripts that do not call define() to register a module 

    shim: { 

     underscore: { 
      exports: '_' 
     }, 
     backbone: { 
      deps: [ 
       'underscore', 
       'jquery' 
      ], 
      exports: 'Backbone' 
     }, 
     'jquery-ui': { 
      exports: "$", 
      deps: ['jquery'] 
     }, 
     'fancytree': { 
      deps: ['jquery-ui'] 
     }, 

    }, 
    paths: { 
     'jquery': '../lib/jquery/jquery', 
     'underscore': '../lib/underscore/underscore', 
     'backbone': '../lib/backbone/backbone',  
     'text': '../lib/text/text', 
     'jquery-ui': '../vendor/jquery-ui/jquery-ui', 
     'fancytree': [  
      '../vendor/fancytree/fancytree', 
      '../vendor/fancytree/fancytree.table' 
     ],  
    }, 

    baseUrl: '/js/app', 

}); 

觀點:

define(['jquery-ui', 'fancytree', 'require'], function(ui, fancytree, require){ 

    'use strict'; 

    var $ = require('jquery'), 
     _ = require('underscore'), 
     Backbone = require('backbone'), 
     tpl = require('text!templates/categories.html') /* this line here produces error loading text.js*/, 
     template = _.template(tpl); 


    return Backbone.View.extend({ 
     el: $('#tree'), 
     initialize: function() { 

      this.listenTo(this.collection, 'reset add change remove', this.render, this); 
      this.collection.fetch(); 
     }, 
     initFancyTree: function() { 
      console.log('tree'); 
      $('#fancytree').fancytree(); 

     }, 
     render: function() { 

      console.log(this.collection.toJSON()) 
      this.$el.html(template()); 
      //this.initFancyTree(); 
      return this; 
     } 
    }); 
}) 
+0

[RequireJS中的Dynamic require可能重複,獲取「模塊名稱尚未加載上下文」錯誤?](http://stackoverflow.com/questions/17446844/dynamic-require-in-requirejs-getting-module- name-has-not-been-loaded-yet-for-c) –

+0

在請求之前,請花時間閱讀文檔並調試您的代碼。 [這是不是從你有問題的那一刻起15分鐘](http://stackoverflow.com/questions/40712506/error-loading-jquery-ui-in-require-js-config-for-fancytree-plugin#comment68653176_40712532 )以及您發佈問題的時刻。 –

回答

2

你試圖使用CommonJS的語法要求模塊,這些模塊RequireJS tries to emulate通過加載模板異步。

由於當您嘗試使用它時還沒有準備好,它會引發錯誤。

你只需要以下才能正常工作:

define([ 
    'jquery', 'underscore', 'backbone', 'jquery-ui', 'fancytree', 
    'text!templates/categories.html' 
], function(
    $, _, Backbone, ui, fancytree, 
    tpl 
) { 
    'use strict'; 
    return Backbone.View.extend({ 
     el: $('#tree'), 
     template: _.template(tpl), // can be put here directly 
     initialize: function() { 
      // only has 3 parameters 
      this.listenTo(this.collection, 'reset add change remove', this.render); 
      this.collection.fetch(); 
     }, 
     render: function() { 
      this.$el.html(this.template()); 
      return this; 
     } 
    }); 

}); 

附加信息(以及類似的問題):

+0

Thankyou它的工作你的幫助非常感謝 - 歡呼聲 – ONYX

相關問題