blocks|key|244044|text|我认为this可能会对你有所帮助。解决方案中的所有内容都围绕着require.js库，它是一个JavaScript文件和模块加载器。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|244045|上面链接上的教程很好地展示了如何组织骨干项目。还提供了一个sample+implementation。希望这能有所帮助。|244046|entityMap|0|LINK|mutability|MUTABLE|url|http://backbonetutorials.com/organizing-backbone-using-modules/|1|https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/examples/modular-backbone^0|V|A|3|4|0|0|T|L|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@$9|U|A|V|1|W]]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|H|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]|P|$5|K|L|M|E|$N|Q]]]]

I think <a href="http://backbonetutorials.com/organizing-backbone-using-modules/" rel="noreferrer">this</a> is what might help you. Everything in the solution revolves around <code>require.js</code> library which is a JavaScript file and module loader.

The tutorial at the link above shows very nicely how a backbone project could be organized. A <a href="https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/examples/modular-backbone" rel="noreferrer">sample implementation</a> is also provided. Hope this helps.

blocks|key|2921835|text|EDIT:这个答案已经过时了。我会删除它，但它是“接受”的答案。我将转而发表我的观点。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2921836|我不再主张这样做了。相反，我会将所有模板分离到单独的HTML文件中。有些人建议以异步方式加载这些文件(Require.js或某种模板缓存)。这在小项目上效果很好，但在有很多模板的大型项目中，你会发现自己在页面加载时发出了大量的小型异步请求，这是我真的不喜欢的。(呃...好的，您可以通过使用r.js预编译初始依赖项来使用Require.js绕过这个问题，但是对于模板，我仍然觉得这是错误的)|2921837|我喜欢使用grunt任务(grunt+contrib-jst)将所有的模板编译成一个单独的templates.js文件并包含在内。你得到了世界上最好的东西。模板存在于一个文件中，所述模板的编译发生在构建时(而不是运行时)，并且在页面启动时不会有100个微小的异步请求。|2921838|下面的一切都是垃圾|2921839|对我来说，我更喜欢在模板中包含JS文件的简单性。因此，我可能会创建一个名为view_template.js的文件，其中包含作为变量的模板：|2921840|app.templates.view+=+"+\
++++<h3>something+code</h3>+\
";|code-block|syntax|javascript|2921841|然后，它就像包含一个普通的脚本文件一样简单，然后在视图中使用它：|2921842|template:+_.template(app.templates.view)|2921843|更进一步，我实际上使用了coffeescript，所以我的代码看起来更像这样，并且避免了行尾转义字符：|2921844|app.templates.view+=+'''
++++<h3>something+code</h3>
'''|2921845|使用这种方法可以避免在不必要的情况下引入require.js。|2921846|entityMap^0|0|17|0|0|5F|0|Z|2R|0|0|9|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|17|8|@$9|18|A|19|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1A|8|@$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|1D|8|@$9|1E|A|1F|B|C]]|D|@]|E|$]]|$1|L|3|M|5|6|7|1G|8|@]|D|@]|E|$]]|$1|N|3|O|5|P|7|1H|8|@]|D|@]|E|$Q|R]]|$1|S|3|T|5|6|7|1I|8|@]|D|@]|E|$]]|$1|U|3|V|5|P|7|1J|8|@]|D|@]|E|$Q|R]]|$1|W|3|X|5|6|7|1K|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|P|7|1L|8|@]|D|@]|E|$Q|R]]|$1|10|3|11|5|6|7|1M|8|@]|D|@]|E|$]]|$1|12|3|-4|5|6|7|1N|8|@]|D|@]|E|$]]]|13|$]]

EDIT: This answer is old and outdated. I'd delete it, but it is the "accepted" answer. I'll inject my opinion instead.

I wouldn't advocate doing this anymore. Instead, I would separate all templates into individual HTML files. Some would suggest loading these asynchronously (Require.js or a template cache of sorts). That works well on small projects but on large projects with lots of templates, you find yourself making a ton of small async requests on page load which I really dislike. (ugh... ok, you can get around it with Require.js by pre-compiling your initial dependencies with r.js, but for templates, this still feels wrong to me)

I like using a grunt task (grunt-contrib-jst) to compile all of the HTML templates into a single templates.js file and include that. You get the best of all worlds IMO... templates live in a file, compilation of said templates happen at build time (not runtime), and you don't have one hundred tiny async requests when the page starts up.

Everything below is junk

For me, I prefer the simplicity of including a JS file with my template. So, I might create a file called view_template.js which includes the template as a variable:

<pre><code>app.templates.view = " \
 &lt;h3&gt;something code&lt;/h3&gt; \
";
</code></pre>

Then, it is as simple as including the script file like a normal one and then using it in your view:

<pre><code>template: _.template(app.templates.view)
</code></pre>

Taking it a step further, I actually use coffeescript, so my code actually looks more like this and avoid the end-of-line escape characters:

<pre><code>app.templates.view = '''
 &lt;h3&gt;something code&lt;/h3&gt;
'''
</code></pre>

Using this approach avoids brining in require.js where it really isn't necessary.

blocks|key|244060|text|这里有一个简单的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|244061|var+rendered_html+=+render('mytemplate',+{});

function+render(tmpl_name,+tmpl_data)+{
++++if+(+!render.tmpl_cache+)+{+
++++++++render.tmpl_cache+=+{};
++++}

++++if+(+!+render.tmpl_cache[tmpl_name]+)+{
++++++++var+tmpl_dir+=+'/static/templates';
++++++++var+tmpl_url+=+tmpl_dir+%2B+'/'+%2B+tmpl_name+%2B+'.html';

++++++++var+tmpl_string;
++++++++$.ajax({
++++++++++++url:+tmpl_url,
++++++++++++method:+'GET',
++++++++++++dataType:+'html',+//**+Must+add+
++++++++++++async:+false,
++++++++++++success:+function(data)+{
++++++++++++++++tmpl_string+=+data;
++++++++++++}
++++++++});

++++++++render.tmpl_cache[tmpl_name]+=+_.template(tmpl_string);
++++}

++++return+render.tmpl_cache[tmpl_name](tmpl_data);
}|code-block|syntax|javascript|244062|在这里使用"async:+false“并不是一种坏方法，因为在任何情况下，您都必须等待模板加载完成。|244063|因此，"render“函数|244064|244065|允许你将每个模板存储在单独的html文件中的静态目录中，并且缓存templates|ordered-list-item|244066|abstracts模板加载逻辑，|244067|非常lightweight|244068|compiles。例如，将来您可以使用预加载和预编译的模板。|244069|易于使用|244070|244071|我正在编辑答案，而不是留下评论，因为我相信这很重要。|244072|如果模板没有出现在原生应用程序中，而您看到了HIERARCHY_REQUEST_ERROR:+DOM+Exception+3，请查看Dave+Robinson+to+What+exactly+can+cause+an+"HIERARCHY_REQUEST_ERR:+DOM+Exception+3"-Error?的answer。|offset|length|style|BOLD|CODE|244073|基本上，您必须添加|244074|dataType:+'html'|244075|发送到$.ajax请求。|244076|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/1256394/what-exactly-can-cause-an-hierarchy-request-err-dom-exception-3-error^0|0|0|0|0|0|0|0|0|0|0|0|0|9|6|M|14|2B|21|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1M|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|1N|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1P|8|@]|9|@]|A|$]]|$1|O|3|P|5|N|7|1Q|8|@]|9|@]|A|$]]|$1|Q|3|R|5|N|7|1R|8|@]|9|@]|A|$]]|$1|S|3|T|5|N|7|1S|8|@]|9|@]|A|$]]|$1|U|3|V|5|N|7|1T|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1U|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1V|8|@]|9|@]|A|$]]|$1|Z|3|10|5|6|7|1W|8|@$11|1X|12|1Y|13|14]|$11|1Z|12|20|13|15]]|9|@$11|21|12|22|1|23]]|A|$]]|$1|16|3|17|5|6|7|24|8|@]|9|@]|A|$]]|$1|18|3|19|5|D|7|25|8|@]|9|@]|A|$E|F]]|$1|1A|3|1B|5|6|7|26|8|@]|9|@]|A|$]]|$1|1C|3|-4|5|6|7|27|8|@]|9|@]|A|$]]]|1D|$1E|$5|1F|1G|1H|A|$1I|1J]]]]

Here is a simple solution:

<pre><code>var rendered_html = render('mytemplate', {});

function render(tmpl_name, tmpl_data) {
 if ( !render.tmpl_cache ) { 
 render.tmpl_cache = {};
 }

 if ( ! render.tmpl_cache[tmpl_name] ) {
 var tmpl_dir = '/static/templates';
 var tmpl_url = tmpl_dir + '/' + tmpl_name + '.html';

 var tmpl_string;
 $.ajax({
 url: tmpl_url,
 method: 'GET',
 dataType: 'html', //** Must add 
 async: false,
 success: function(data) {
 tmpl_string = data;
 }
 });

 render.tmpl_cache[tmpl_name] = _.template(tmpl_string);
 }

 return render.tmpl_cache[tmpl_name](tmpl_data);
}
</code></pre>

Using "async: false" here is not a bad way because in any case you must wait until template will be loaded. 

So, "render" function

<ol>
<li>allows you to store each template in separate html file in static
dir </li>
<li>is very lightweight</li>
<li>compiles and caches templates</li>
<li>abstracts template loading logic. For example, in future you can use preloaded and precompiled templates.</li>
<li>is easy to use</li>
</ol>

[I am editing the answer instead of leaving a comment because I believe this to be important.]

if templates are not showing up in native app, and you see <code>HIERARCHY_REQUEST_ERROR: DOM Exception 3</code>, look at answer by Dave Robinson to <a href="https://stackoverflow.com/questions/1256394/what-exactly-can-cause-an-hierarchy-request-err-dom-exception-3-error">What exactly can cause an &quot;HIERARCHY_REQUEST_ERR: DOM Exception 3&quot;-Error?</a>. 

Basically, you must add

<pre><code>dataType: 'html'
</code></pre>

to the $.ajax request.

blocks|key|247896|text|我对javascript模板产生了兴趣，现在我正在用backbone迈出第一步。这就是我想出来的，而且看起来效果很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|247897|window.App+=+{

++++get+:+function(url)+{
++++++++var+data+=+"<h1>+failed+to+load+url+:+"+%2B+url+%2B+"</h1>";
++++++++$.ajax({
++++++++++++async:+false,
++++++++++++url:+url,
++++++++++++success:+function(response)+{
++++++++++++++++data+=+response;
++++++++++++}
++++++++});
++++++++return+data;
++++}
}

App.ChromeView+=+Backbone.View.extend({
++++template:+_.template(+App.get("tpl/chrome.html")+),
++++render:+function+()+{
++++++++$(this.el).html(this.template());
++++++++return+this;
++++},
});

App.chromeView+=+new+App.ChromeView({+el+:+document.body+});
App.chromeView.render();|code-block|syntax|javascript|247898|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I got interested on javascript templating and now I'm taking the first steps with backbone. This is what i came up with and seems to work pretty well. 

<pre><code>window.App = {

 get : function(url) {
 var data = "&lt;h1&gt; failed to load url : " + url + "&lt;/h1&gt;";
 $.ajax({
 async: false,
 url: url,
 success: function(response) {
 data = response;
 }
 });
 return data;
 }
}

App.ChromeView = Backbone.View.extend({
 template: _.template( App.get("tpl/chrome.html") ),
 render: function () {
 $(this.el).html(this.template());
 return this;
 },
});

App.chromeView = new App.ChromeView({ el : document.body });
App.chromeView.render();
</code></pre>

blocks|key|247900|text|我不想使用require.js来完成这个简单的任务，所以我使用了经过修改的koorchik的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|247901|function+require_template(templateName,+cb)+{
++++var+template+=+$('#template_'+%2B+templateName);
++++if+(template.length+===+0)+{
++++++++var+tmpl_dir+=+'./templates';
++++++++var+tmpl_url+=+tmpl_dir+%2B+'/'+%2B+templateName+%2B+'.tmpl';
++++++++var+tmpl_string+=+'';

++++++++$.ajax({
++++++++++++url:+tmpl_url,
++++++++++++method:+'GET',
++++++++++++contentType:+'text',
++++++++++++complete:+function+(data,+text)+{
++++++++++++++++tmpl_string+=+data.responseText;
++++++++++++++++$('head').append('<script+id="template_'+%2B+templateName+%2B+'"+type="text/template">'+%2B+tmpl_string+%2B+'<\/script>');
++++++++++++++++if+(typeof+cb+===+'function')
++++++++++++++++++++cb('tmpl_added');
++++++++++++}
++++++++});
++++}+else+{
++++++++callback('tmpl_already_exists');
++++}
}

require_template('a',+function(resp)+{
++++if+(resp+==+'tmpl_added'+%7C%7C+'tmpl_already_exists')+{
++++++++//+init+your+template+'a'+rendering
++++}
});
require_template('b',+function(resp)+{
++++if+(resp+==+'tmpl_added'+%7C%7C+'tmpl_already_exists')+{
++++++++//+init+your+template+'b'+rendering
++++}
});|code-block|syntax|javascript|247902|为什么要将模板附加到文档中，而不是将它们存储在javascript对象中？因为在生产版本中，我想生成包含所有模板的html文件，所以我不需要发出任何额外的ajax请求。同时，我不需要在我的代码中进行任何重构，因为我使用|247903|this.template+=+_.template($('#template_name').html());|247904|在我看来。|247905|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I didn't want to use require.js for this simple task, so I used modified koorchik's solution. 

<pre><code>function require_template(templateName, cb) {
 var template = $('#template_' + templateName);
 if (template.length === 0) {
 var tmpl_dir = './templates';
 var tmpl_url = tmpl_dir + '/' + templateName + '.tmpl';
 var tmpl_string = '';

 $.ajax({
 url: tmpl_url,
 method: 'GET',
 contentType: 'text',
 complete: function (data, text) {
 tmpl_string = data.responseText;
 $('head').append('&lt;script id="template_' + templateName + '" type="text/template"&gt;' + tmpl_string + '&lt;\/script&gt;');
 if (typeof cb === 'function')
 cb('tmpl_added');
 }
 });
 } else {
 callback('tmpl_already_exists');
 }
}

require_template('a', function(resp) {
 if (resp == 'tmpl_added' || 'tmpl_already_exists') {
 // init your template 'a' rendering
 }
});
require_template('b', function(resp) {
 if (resp == 'tmpl_added' || 'tmpl_already_exists') {
 // init your template 'b' rendering
 }
});
</code></pre>

Why to append templates to document, rather than storing them in javascript object? Because in production version I would like to generate html file with all templates already included, so I won't need to make any additional ajax requests. And in the same time I won't need to make any refactoring in my code, as I use 

<pre><code>this.template = _.template($('#template_name').html());
</code></pre>

in my Backbone views.

blocks|key|2921913|text|我必须将数据类型设置为"text“才能为我工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2921914|get+:+function(url)+{
++++var+data+=+"<h1>+failed+to+load+url+:+"+%2B+url+%2B+"</h1>";
++++$.ajax({
++++++++async:+false,
++++++++dataType:+"text",
++++++++url:+url,
++++++++success:+function(response)+{
++++++++++++data+=+response;
++++++++}
++++});
++++return+data;
}|code-block|syntax|javascript|2921915|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I had to set the data type to "text" to make it work for me:

<pre><code>get : function(url) {
 var data = "&lt;h1&gt; failed to load url : " + url + "&lt;/h1&gt;";
 $.ajax({
 async: false,
 dataType: "text",
 url: url,
 success: function(response) {
 data = response;
 }
 });
 return data;
}
</code></pre>

blocks|key|246178|text|这可能有点离题，但您可以使用在node.js+(http://nodejs.org/，适用于所有主要平台)上运行的Grunt+(http://gruntjs.com/)从命令行运行任务。这个工具有很多插件，比如模板编译器https://npmjs.org/package/grunt-contrib-jst。请参阅有关GitHub、https://github.com/gruntjs/grunt-contrib-jst的文档。(您还需要了解如何运行节点包管理器https://npmjs.org/。不要担心，它非常简单和通用。)|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|246179|然后你可以将所有的模板保存在单独的html文件中，运行工具来使用下划线预编译它们(我相信这是JST插件的依赖项，但不用担心，节点包管理器会自动为你安装依赖项)。|246180|这会将所有的模板编译成一个脚本，比如|246181|templates.js|code-block|syntax|javascript|246182|加载脚本将设置一个全局变量--默认情况下是"JST“--它是一个函数数组，可以像这样访问：|246183|JST['templates/listView.html']()|style|CODE|246184|它将类似于|246185|_.template(+$('#selector-to-your-script-template'))|246186|如果将脚本标记的内容放在(templates/)listView.html中|246187|然而，最重要的是:+Grunt附带了一个名为'watch‘的任务，它基本上会监控你在本地grunt.js文件(这基本上是你的Grunt项目的一个配置文件，在javascript中)中定义的文件的变化。如果您有grunt，请键入以下命令来启动此任务：|246188|grunt+watch|246189|在命令行中，Grunt将监视您对文件所做的所有更改，如果检测到更改，则会自动执行您在该grunt.js文件中为其设置的所有任务-就像上面描述的jst任务。编辑并保存您的文件，然后将所有模板重新编译为一个js文件，即使它们分散在许多目录和子目录中。|246190|可以配置类似的任务来编译你的javascript，运行测试，连接和缩小/丑化你的脚本文件。所有这些都可以绑定到监视任务，因此对文件的更改将自动触发项目的新“构建”。|246191|设置这些东西并了解如何配置grunt.js文件需要一些时间，但这是非常值得投入的时间，我认为您永远不会回到以前的工作方式|246192|entityMap|0|LINK|mutability|MUTABLE|url|http://nodejs.org/|1|http://gruntjs.com/|2|https://npmjs.org/package/grunt-contrib-jst|3|https://github.com/gruntjs/grunt-contrib-jst|4|https://npmjs.org/^0|O|I|0|1S|J|1|32|17|2|4M|18|3|6F|I|4|0|0|0|0|0|0|W|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1O|8|@]|9|@$A|1P|B|1Q|1|1R]|$A|1S|B|1T|1|1U]|$A|1V|B|1W|1|1X]|$A|1Y|B|1Z|1|20]|$A|21|B|22|1|23]]|C|$]]|$1|D|3|E|5|6|7|24|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|25|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|26|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|27|8|@]|9|@]|C|$]]|$1|O|3|P|5|6|7|28|8|@$A|29|B|2A|Q|R]]|9|@]|C|$]]|$1|S|3|T|5|6|7|2B|8|@]|9|@]|C|$]]|$1|U|3|V|5|J|7|2C|8|@]|9|@]|C|$K|L]]|$1|W|3|X|5|6|7|2D|8|@]|9|@]|C|$]]|$1|Y|3|Z|5|6|7|2E|8|@]|9|@]|C|$]]|$1|10|3|11|5|J|7|2F|8|@]|9|@]|C|$K|L]]|$1|12|3|13|5|6|7|2G|8|@]|9|@]|C|$]]|$1|14|3|15|5|6|7|2H|8|@]|9|@]|C|$]]|$1|16|3|17|5|6|7|2I|8|@]|9|@]|C|$]]|$1|18|3|-4|5|6|7|2J|8|@]|9|@]|C|$]]]|19|$1A|$5|1B|1C|1D|C|$1E|1F]]|1G|$5|1B|1C|1D|C|$1E|1H]]|1I|$5|1B|1C|1D|C|$1E|1J]]|1K|$5|1B|1C|1D|C|$1E|1L]]|1M|$5|1B|1C|1D|C|$1E|1N]]]]

This might be slightly off topic, but you could use Grunt (http://gruntjs.com/) - which runs on node.js (http://nodejs.org/, available for all major platforms) to run tasks from the command line. There are a bunch of plugins for this tool, like a template compiler, <a href="https://npmjs.org/package/grunt-contrib-jst">https://npmjs.org/package/grunt-contrib-jst</a>. See documentation on GitHub, <a href="https://github.com/gruntjs/grunt-contrib-jst">https://github.com/gruntjs/grunt-contrib-jst</a>. (You will also need to understand how to run node package manager, <a href="https://npmjs.org/">https://npmjs.org/</a>. Don't worry, it's incredibly easy and versatile. )

You can then keep all your templates in separate html files, run the tool to precompile them all using underscore (which I believe is a dependency for the JST plugin, but don't worry, node package manager will auto install dependencies for you).

This compiles all your templates to one script, say 

<pre><code>templates.js
</code></pre>

Loading the script will set a global - "JST" by default - which is an array of functions, and can be accessed like so:

<code>JST['templates/listView.html']()</code> 

which would be similar to 

<pre><code>_.template( $('#selector-to-your-script-template'))
</code></pre>

if you put the content of that script tag in (templates/)listView.html

However, the real kicker is this: Grunt comes with this task called 'watch', which will basically monitor changes to files that you have defined in your local grunt.js file (which is basically a config file for your Grunt project, in javascript). If you have grunt start this task for you, by typing: 

<pre><code>grunt watch
</code></pre>

from the command line, Grunt will monitor all changes you make to the files and auto-execute all tasks that you have setup for it in that grunt.js file if it detects changes - like the jst task described above. Edit and then save your files, and all your templates recompile into one js file, even if they are spread out over a number of directories and subdirectories. 

Similar tasks can be configured for linting your javascript, running tests, concatenating and minifying / uglifying your script files. And all can be tied to the watch task so changes to your files will automatically trigger a new 'build' of your project. 

It takes some time to set things up and understand how to configure the grunt.js file, but it well, well worth the time invested, and I don't think you will ever go back to a pre-grunt way of working

blocks|key|249143|text|我知道这个问题真的很老，但它是在google搜索下划线ajax模板时出现的第一个结果。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|249144|我厌倦了找不到一个好的解决方案，所以我创建了自己的解决方案：|249145|https://github.com/ziad-saab/underscore-async-templates|offset|length|249146|除了使用AJAX加载下划线模板之外，它还添加了<%25+include+%25>功能。我希望它能对某些人有用。|249147|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|1J|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@$F|T|G|U|1|V]]|A|$]]|$1|H|3|I|5|6|7|W|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|E]]]]

I know this question is really old but it came up as the first result on a google search for underscore ajax templates.

I was tired of not finding a good solution for this so I created my own:

<a href="https://github.com/ziad-saab/underscore-async-templates" rel="nofollow">https://github.com/ziad-saab/underscore-async-templates</a>

In addition to loading underscore templates using AJAX, it adds &lt;% include %> functionality. I hope it can be useful to someone.

blocks|key|2921985|text|这个mixin允许你使用下划线以非常简单的方式呈现外部模板：_.templateFromUrl(url,+[data],+[settings])。方法接口与下划线的+_.template()几乎相同。包括缓存。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|2921986|_.mixin({templateFromUrl:+function+(url,+data,+settings)+{
++++var+templateHtml+=+"";
++++this.cache+=+this.cache+%7C%7C+{};

++++if+(this.cache[url])+{
++++++++templateHtml+=+this.cache[url];
++++}+else+{
++++++++$.ajax({
++++++++++++url:+url,
++++++++++++method:+"GET",
++++++++++++async:+false,
++++++++++++success:+function(data)+{
++++++++++++++++templateHtml+=+data;
++++++++++++}
++++++++});

++++++++this.cache[url]+=+templateHtml;
++++}

++++return+_.template(templateHtml,+data,+settings);
}});|code-block|syntax|javascript|2921987|用法：|2921988|var+someHtml+=+_.templateFromUrl("http://example.com/template.html",+{"var":+"value"});|2921989|entityMap|0|LINK|mutability|MUTABLE|url|http://underscorejs.org/#template^0|C|3|26|4|U|16|2B|C|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|D]]|E|@$9|14|A|15|1|16]]|F|$]]|$1|G|3|H|5|I|7|17|8|@]|E|@]|F|$J|K]]|$1|L|3|M|5|6|7|18|8|@]|E|@]|F|$]]|$1|N|3|O|5|I|7|19|8|@]|E|@]|F|$J|K]]|$1|P|3|-4|5|6|7|1A|8|@]|E|@]|F|$]]]|Q|$R|$5|S|T|U|F|$V|W]]]]

This mixin allows you to render external template using Underscore in very simple way: <code>_.templateFromUrl(url, [data], [settings])</code>. Method API is almost the same as Underscore's <a href="http://underscorejs.org/#template">_.template()</a>. Caching included.

<pre><code>_.mixin({templateFromUrl: function (url, data, settings) {
 var templateHtml = "";
 this.cache = this.cache || {};

 if (this.cache[url]) {
 templateHtml = this.cache[url];
 } else {
 $.ajax({
 url: url,
 method: "GET",
 async: false,
 success: function(data) {
 templateHtml = data;
 }
 });

 this.cache[url] = templateHtml;
 }

 return _.template(templateHtml, data, settings);
}});
</code></pre>

Usage:

<pre><code>var someHtml = _.templateFromUrl("http://example.com/template.html", {"var": "value"});
</code></pre>

blocks|key|2922072|text|我对强制jQuery同步运行感到有点不安，所以我使用promises修改了前面的同步示例。它基本相同，但是异步运行的。我在这个例子中使用的是hbs模板：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2922073|var+asyncRenderHbs=+function(template_name,+template_data)+{
++++if+(!asyncRenderHbs.template_cache)+{+
++++++++asyncRenderHbs.template_cache=+{};
++++}

++++var+promise=+undefined;

++++if+(!asyncRenderHbs.template_cache[template_name])+{
++++++++promise=+new+Promise(function(resolve,+reject)+{
++++++++++++var+template_url=+'/templates/'+%2B+template_name;
++++++++++++$.ajax({
++++++++++++++++url:+template_url,
++++++++++++++++method:+'GET',
++++++++++++++++success:+function(data)+{
++++++++++++++++++++asyncRenderHbs.template_cache[template_name]=+Handlebars.compile(data);
++++++++++++++++++++resolve(asyncRenderHbs.template_cache[template_name](template_data));
++++++++++++++++},
++++++++++++++++error:+function(err,+message)+{
++++++++++++++++++++reject(err);
++++++++++++++++}+++++++++++
++++++++++++});
++++++++});
++++}+else+{
++++++++promise=+Promise.resolve(asyncRenderHbs.template_cache[template_name](template_data));
++++}

++++return+promise;
};|code-block|syntax|javascript|2922074|然后使用呈现的html：|2922075|asyncRenderHbs('some_template.hbs',+context)
++++.then(function(html)+{
++++++++applicationMain.append(html);
++++++++//+Do+other+stuff+here+after+html+is+rendered...
++++})
++++.catch(function(err)+{
++++++++//+Handle+errors
++++});|2922076|注意:正如其他人所讨论的，最好将所有模板编译成一个templates.js文件，并在开始时加载该文件，而不是在网页加载时使用许多小的同步AJAX调用来获取模板。|2922077|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I was a bit uneasy forcing jQuery to function synchronously, so I modified the previous synchronous example using promises. It's pretty much the same, but runs asynchronously. I'm using hbs templates in this example:

<pre><code>var asyncRenderHbs= function(template_name, template_data) {
 if (!asyncRenderHbs.template_cache) { 
 asyncRenderHbs.template_cache= {};
 }

 var promise= undefined;

 if (!asyncRenderHbs.template_cache[template_name]) {
 promise= new Promise(function(resolve, reject) {
 var template_url= '/templates/' + template_name;
 $.ajax({
 url: template_url,
 method: 'GET',
 success: function(data) {
 asyncRenderHbs.template_cache[template_name]= Handlebars.compile(data);
 resolve(asyncRenderHbs.template_cache[template_name](template_data));
 },
 error: function(err, message) {
 reject(err);
 } 
 });
 });
 } else {
 promise= Promise.resolve(asyncRenderHbs.template_cache[template_name](template_data));
 }

 return promise;
};
</code></pre>

Then to use the rendered html:

<pre><code>asyncRenderHbs('some_template.hbs', context)
 .then(function(html) {
 applicationMain.append(html);
 // Do other stuff here after html is rendered...
 })
 .catch(function(err) {
 // Handle errors
 });
</code></pre>

NOTE: As discussed by others, it would be preferable to compile all templates into a single templates.js file and load that in the beginning rather than have many small synchronous AJAX calls to get templates when the webpage loads.

blocks|key|249239|text|警告-这是龙：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|249240|我提到下面显示的方法只是为了帮助那些努力使ASP.NET堆栈(和类似的框架)与js-lib生态系统和谐工作的人。不用说，这不是一个通用的解决方案。话虽如此...|249241|/endforwardwarning|249242|如果您使用的是ASP.NET，那么只需将模板放在它们自己的一个或多个局部视图中，就可以将它们外部化。也就是你的.cshtml内部：|249243|++@Html.Partial("path/to/template")|code-block|syntax|javascript|249244|在你的template.cshtml中：|249245|+++//+this+is+razorview+and+thusly+if+you+ever+need+to+use+the+@+character+in+here++
+++//+you+will+have+to+either+escape+it+as+@@+or+use+the+html+codepoint+which+is+&#64
+++//+http://stackoverflow.com/questions/3626250/escape-character-in-razor-view-engine
+++<script+type="text/x-template"+id="someId">
++++++++<span+class="foo"><%25=+name+%25>
+++</script>|249246|现在，您可以像往常一样使用模板：|249247|++_.template($("#someId").html())({+name:+"Foobar"+});|249248|希望这种难以捉摸的方法能帮助人们省去一个小时的挠头时间。|249249|entityMap^0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|14|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|15|8|@]|9|@]|A|$]]|$1|S|3|T|5|J|7|16|8|@]|9|@]|A|$K|L]]|$1|U|3|V|5|6|7|17|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

Forward warning - Here be dragons:

I mention the approach shown below simply to help those struggling to make ASP.NET stacks (and similar frameworks) work harmoniously with the ecosystem of js-libs. It goes without saying that this is not a generic solution. Having said that ...

/endforwardwarning

If you are using ASP.NET you can externalize your templates simply by placing them inside one or more partial views of their own. Aka inside your .cshtml:

<pre><code> @Html.Partial("path/to/template")
</code></pre>

Inside your template.cshtml:

<pre><code> // this is razorview and thusly if you ever need to use the @ character in here 
 // you will have to either escape it as @@ or use the html codepoint which is &amp;#64
 // http://stackoverflow.com/questions/3626250/escape-character-in-razor-view-engine
 &lt;script type="text/x-template" id="someId"&gt;
 &lt;span class="foo"&gt;&lt;%= name %&gt;&lt;/span&gt;
 &lt;/script&gt;
</code></pre>

And now you can use the template like usual:

<pre><code> _.template($("#someId").html())({ name: "Foobar" });
</code></pre>

Hope this elusively-obvious approach helps someone save an hour's worth of head-scratching.

blocks|key|2922130|text|我找到了一个适合我使用jQuery的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2922131|我使用jQuery.load()方法将下划线模板代码添加到主html文件中。|2922132|一旦它在那里，我将使用它来生成模板。所有这些都需要同步发生！|2922133|的概念是：|offset|length|style|BOLD|2922134|我有一个下划线地图模板代码：|2922135|
<script+type="text/template"+id="game-map-template">
++++<%25+_.each(rc,+function(rowItem,+index){+%25>
++++++<ul+class="map-row"+data-row="<%25-+index+%25>">
++++++++<li+class="map-col+<%25-+colItem.areaType+?+'active-area'+:+''+%25>"></li>
++++++++...
</script>|code-block|syntax|javascript|2922136|我将代码放在一个名为map-template.html的文件中|2922137|之后，我为模板文件创建了一个包装器。|2922138|<div+id="templatesPool"></div>|2922139|然后，我将该文件包含在我的主html文件中，如下所示。|2922140|在head中：|2922141|
<script>+
++++$(function(){
++++++$("#templatesPool").append($('<div>').load("map-template.html"));+
++++});
</script>+|2922142|干杯。|2922143|entityMap^0|0|0|0|0|5|0|0|0|A|H|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|19|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1A|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|1B|8|@$H|1C|I|1D|J|K]]|9|@]|A|$]]|$1|L|3|M|5|6|7|1E|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|1F|8|@]|9|@]|A|$Q|R]]|$1|S|3|T|5|6|7|1G|8|@$H|1H|I|1I|J|K]]|9|@]|A|$]]|$1|U|3|V|5|6|7|1J|8|@]|9|@]|A|$]]|$1|W|3|X|5|P|7|1K|8|@]|9|@]|A|$Q|R]]|$1|Y|3|Z|5|6|7|1L|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|1M|8|@]|9|@]|A|$]]|$1|12|3|13|5|P|7|1N|8|@]|9|@]|A|$Q|R]]|$1|14|3|15|5|6|7|1O|8|@]|9|@]|A|$]]|$1|16|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]]|17|$]]

I found a solution that works for me with using jQuery.

I add the underscore template code, with jQuery.load() method, to the main html file.

Once it's there, I'm using it for generating the templates. 
All need to happen synchronously! 

The concept is:

I have a underscore map template code:

<pre><code>&lt;!-- MAP TEMPLATE--&gt;
&lt;script type="text/template" id="game-map-template"&gt;
 &lt;% _.each(rc, function(rowItem, index){ %&gt;
 &lt;ul class="map-row" data-row="&lt;%- index %&gt;"&gt;
 &lt;li class="map-col &lt;%- colItem.areaType ? 'active-area' : '' %&gt;"&gt;&lt;/li&gt;
 ...
&lt;/script&gt;
</code></pre>

And I put that code in a file called map-template.html

After that I create a a wrapper for the template files.

<pre><code>&lt;div id="templatesPool"&gt;&lt;/div&gt;
</code></pre>

Then I include that file in my main html file like so.

In head:

<pre><code>&lt;!-- Template Loader --&gt;
&lt;script&gt; 
 $(function(){
 $("#templatesPool").append($('&lt;div&gt;').load("map-template.html")); 
 });
&lt;/script&gt; 
</code></pre>

Cheers.

I use <a href="http://documentcloud.github.com/underscore/#template" rel="noreferrer">Underscore template</a>. It is possible to attach a external file as template?

In Backbone View I have:

<pre><code> textTemplate: _.template( $('#practice-text-template').html() ),

 initialize: function(){ 
 this.words = new WordList; 
 this.index = 0;
 this.render();
 },
</code></pre>

In my html is:

<pre><code>&lt;script id="practice-text-template" type="text/template"&gt;
 &lt;h3&gt;something code&lt;/h3&gt;
&lt;/script&gt;
</code></pre>

It works well. But I need external template.
I try:

<pre><code>&lt;script id="practice-text-template" type="text/template" src="templates/tmp.js"&gt;
</code></pre>

or

<pre><code>textTemplate: _.template( $('#practice-text-template').load('templates/tmp.js') ),
</code></pre>

or 

<pre><code>$('#practice-text-template').load('templates/tmp.js', function(data){ this.textTemplate = _.template( data ) })
</code></pre>

but it did not work.

External template in Underscore

包管理器

编译器

jQuery

GitHub

我使用。可以将外部文件附加为模板在Backbone View中，我有： textTemplate: _.template( $('#practice-text-template').html() ), initialize: function(){                                    ...

问下划线中的外部模板
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问下划线中的外部模板EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问下划线中的外部模板
EN