下划线中的外部模板

小编典典

下划线中的外部模板

javascript

我使用Underscore模板。是否可以将外部文件 附加 为模板 ？

在骨干视图中，我有：

 textTemplate: _.template( $('#practice-text-template').html() ),

 initialize: function(){                                            
  this.words = new WordList;            
  this.index = 0;
  this.render();
 },

在我的html中是：

<script id="practice-text-template" type="text/template">
   <h3>something code</h3>
</script>

它运作良好。但是 我需要外部模板 。我尝试：

<script id="practice-text-template" type="text/template" src="templates/tmp.js">

要么

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

要么

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

但它没有用。

阅读 296

2020-05-01

共1个答案

小编典典

编辑：这个答案是旧的和过时的。我将其删除，但这是“已接受”的答案。我会发表我的意见。

我不再提倡这样做。
相反，我会将所有模板都分成单独的HTML文件。有些人建议异步加载这些文件（Require.js或各种模板缓存）。这在小型项目上效果很好，但在具有大量模板的大型项目上，您发现自己在页面加载时发出了大量的小型异步请求，这是我非常不喜欢的。（嗯…好吧，您可以通过使用r.js预编译初始依赖项来使用Require.js来解决它，但是对于模板，这对我来说仍然是错误的）

我喜欢使用grunt任务（grunt-contrib-jst）将所有HTML模板编译为一个template.js文件，并将其包含在内。
您将获得世界上最好的IMO …模板，并将它们保存在文件中，对这些模板的编译在构建时（而不是运行时）进行，并且在页面启动时没有一百个微小的异步请求。

下面的一切都是垃圾

对我来说，我更喜欢在模板中包含JS文件的简单性。因此，我可能会创建一个名为view_template.js的文件，该文件包含模板作为变量：

app.templates.view = " \
    <h3>something code</h3> \
";

然后，它就像将脚本文件像普通文件一样包含然后在您的视图中使用它一样简单：

template: _.template(app.templates.view)

更进一步，我 实际上 使用coffeescript，因此我的代码实际上看起来像这样，并避免了行尾转义符：

app.templates.view = '''
    <h3>something code</h3>
'''

使用这种方法可以避免在确实没有必要的地方使用require.js。

2020-05-01