requirejs文本插件下載

Question

我使用RequireJS文本插件一起裝載車把骨幹佈局管理動態模板，不要求所有模板。但在頁面加載時，所有模板都會下載而不是指定的模板。 在這種情況下如下圖所示的時候我只是想呈現頁腳所有（header，modal）被取出，而不是隻footer.tpl文件。

templateLoader.js

define(function (require) { 
    var Handlebars = require('handlebars'); 

    var getTemplateFile = function (templateName) { 
     var tmpl = null; 
     switch (templateName) { 

     case 'header': 
      tmpl = require('text!../html/templates/header.tpl'); 
      break; 
     case 'footer': 
      tmpl = require('text!../html/templates/footer.tpl'); 
      break; 
     case 'modal': 
      tmpl = require('text!../html/templates/modal.tpl'); 
      break; 
     } 
     return tmpl; 
    }; 


    var _compiled = function (tpl, context) { 
     var compiled = Handlebars.compile(tpl); 
     return context ? compiled(context) : compiled; 
    }; 

    return { 
     getTemplate: function (templateName, model) { 
      return _compiled(getTemplateFile(templateName), model); 
     } 
    } 
}); 

MyView.js - 佈局管理

App.Views.StoreFooter = Backbone.Layout.extend({ 
    beforeRender: function() { 
     this.$el.html(Templates.getTemplate('footer')); 
    } 
}); 

當我檢查在Chrome下載的資源，我看到modal.tpl，header.tpl不應根據在那裏以上代碼。

Answer 1

這是語法糖的副作用，在documentation描述：

---

define(function (require) { 
    var dependency1 = require('dependency1'), 
     dependency2 = require('dependency2'); 

    return function() {}; 
}); 

The AMD loader will parse out the require('') calls by using Function.prototype.toString(), then internally convert the above define call into this:

define(['require', 'dependency1', 'dependency2'], function (require) { 
    var dependency1 = require('dependency1'), 
     dependency2 = require('dependency2'); 

    return function() {}; 
}); 

---

由於它解析函數體作爲字符串，它沒有看到的是，require陳述裏面的方式這是保證只匹配一個case。

編輯：

我認爲這可以通過重構你的代碼位是固定的：

var getTemplateFile = function (templateName) { 
    var path = null; 

    switch (templateName) { 
    case 'header': 
     path = 'text!../html/templates/header.tpl'; 
     break; 
    case 'footer': 
     path = 'text!../html/templates/footer.tpl'; 
     break; 
    case 'modal': 
     path = 'text!../html/templates/modal.tpl'; 
     break; 
    } 

    return require(path); 
}; 

不幸的是，這會導致：

Uncaught Error: Module name "text!blah.txt_unnormalized2" has not been loaded yet for context: _

...這是有道理的當你意識到這只是語法糖，沒有辦法讓RequireJS工作，我n同步模式。