Question

我刚从另一位开发人员手中接过了一个Web应用程序，我正在尝试清理它。目前只有一个HTML文件，长度超过1,000行。它包含至少十二个Backbone模板，我真的想将它们分成自己的文件。我不是Backbone的专家，而且我一直在网上搜索一段时间而没有找到太多帮助。似乎应该有一个非常简单，优雅，甚至推荐的方式，但我还没有发现它。

所以，说我们在index.html中得到了一些这样的代码：

<script type="text/template" id="myTemplate1">
    <p>Hello</p>
</script>
<script type="text/template" id="myTemplate2">
    <p>World!</p>
</script>

如何将它们放在单独的文件中，以便Backbone仍然可以访问它们？

编辑：您好阿纳托利，谢谢你的帮助。我今天有时间玩这个，但我不知道在哪里放东西。我继承了这段代码：

define(function (require, exports, module) {
    var $ = require('jquery'),
        _ = require('underscore'),
        Backbone = require('backbone'),
        Handlebars = require('handlebars'),
        jqueryUI = require('jquery-ui');

    var myView = Backbone.View.extend({
        tagName: 'div',
        className: 'myView',
        template: Handlebars.compile($('#myView').html()),

那么你建议把你建议的代码放在哪里？我尝试将它插入Handlebars.compile（）函数中，但没有运气。感谢您的帮助，我似乎无法在示例或指南方面找到互联网上的任何内容。

Answer 1

使用require-js。特别是使用require-handlebars插件（或您喜欢的任何模板引擎）

https://github.com/SlexAxton/require-handlebars-plugin

这样您就可以将模板放入单独的文件中，然后通过执行以下操作加载它们：

define(['hbs!your/template/file'], function(tpl){
    var html = tpl({data: 'stuff'});
});

Answer 2

我使用了 require-handlebars-plugin 提到的这种方法，但是在尝试预编译它们以便在生产中使用时。使用 require-handlebars-plugin 并不是直截了当我设法做到这一点但是在我花了很多时间调试之后，我的建议是从头开始预编译模板，因为在生产之前更改了这个模板＃39; t hasslefree。

您可以使用以下方法： http://nuunoo.wordpress.com/2013/06/08/javascript-pre-compiled-templates-with-handlebars-js/ 并使用grunt任务自动执行此操作： https://github.com/gruntjs/grunt-contrib-handlebars

将Backbone.js模板放入单独的HTML文件中

2 个答案: