Ember + Handlebars：如何从 html 代码中提取模板答案

【问题标题】：Ember + Handlebars: how to extract templates from html codeEmber + Handlebars：如何从 html 代码中提取模板
【发布时间】：2013-08-03 14:57:52
【问题描述】：

我有一个相当简单的 Ember 应用程序，但即便如此，在 index.html 文件中已经定义了大约 30 个把手模板。

如何从 html 文件中提取这些文件并将它们组织成与模型、控制器、路由等脚本文件夹相同？

此时，我不想预编译模板（我理解 Ember 与预编译模板不完全兼容）。我只是想让模板更好地组织（在文件夹结构中），以便进一步的开发和维护变得更不容易出错......

希望有人能给点建议。

我的 index.html 代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<body>

    <!-- APPLICATION (always rendered) -->
    <script type="text/x-handlebars" id="application">
      <header>
        {{#linkTo 'publications'}}Publications{{/linkTo}} | {{#linkTo 'admin'}}Admin{{/linkTo}} | {{#linkTo 'about'}}About{{/linkTo}} | {{#linkTo 'login'}}Login{{/linkTo}}
         </header>
      <div class="row-fluid" id="applicationOutlet">
        {{outlet}}
      </div>
    </script>

    <!-- ADMIN -->
    <script type="text/x-handlebars" id="admin">
      <div class="row-fluid">
        <div class="span3">
          Select a function <br />
          <ul>
            <li>{{#linkTo 'categories'}}Categories{{/linkTo}}</li>
            <li>{{#linkTo 'authors'}}Authors{{/linkTo}}</li>
          </ul>
        </div>
        <div class="span9" id="adminOutlet">
          {{outlet}}
        </div>
      </div>
    </script>

    <!-- ADMIN/AUTHORS -->
    <script type="text/x-handlebars" id="authors">
      <div class="row-fluid">
        <div class="span3">
          Authors ({{numberOfAuthors}})<br />
          <table>
          {{#each author in content}}
            <tr><td>{{#linkTo 'authors.show' author}}{{author.name}}{{/linkTo}}</td></tr>
          {{else}}
            <tr><td>No authors defined</td></tr>
          {{/each}}
          </table>
          <br />
          {{#linkTo 'authors.new'}}New author{{/linkTo}}
        </div>
        <div class="span6" id="authorsOutlet">
          {{outlet}}
        </div> 
      </div>
    </script>

    <!--called when no nested author is selected-->
    <script type="text/x-handlebars" id="authors/index">
      <div class="row-fluid">
        <div class="span9">
          Select an author or create a new one
        </div> 
      </div>
    </script>

......


 <!-- SCRIPTS -->   
    <!--Libraries-->
    <script src="scripts/libraries/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="scripts/libraries/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    <script src="scripts/libraries/moment.js" type="text/javascript" charset="utf-8"></script>
    <script src="scripts/libraries/handlebars-1.0.0-rc.4.js" type="text/javascript" charset="utf-8"></script>
    <script src="scripts/libraries/showdown.js" type="text/javascript" charset="utf-8"></script>
    <script src="scripts/libraries/ember-1.0.0-rc.6.js" type="text/javascript" charset="utf-8"></script>
    <script src="scripts/libraries/ember-data.js" type="text/javascript" charset="utf-8"></script>
    <script src="scripts/libraries/tinymce/tinymce.min.js"  type="text/javascript" charset="utf-8"></script>

    <!--Application-->
    <script src="scripts/application/app.js" type="text/javascript" charset="utf-8"></script>
    <script src="scripts/application/router.js" type="text/javascript" charset="utf-8"></script>
    <script src="scripts/application/store.js" type="text/javascript" charset="utf-8"></script>

    <!--Routes-->
    <script src="scripts/routes/login_route.js"></script>
    <script src="scripts/routes/about_route.js"></script>
    <!--Routes: admin-->
    <script src="scripts/routes/admin/admin_route.js"></script>
    <!--Routes: admin/authors-->  
    <script src="scripts/routes/admin/authors/authors_show_route.js"></script>
    <script src="scripts/routes/admin/authors/authors_route.js"></script>
    <script src="scripts/routes/admin/authors/authors_new_route.js"></script>

谢谢马克

【问题讨论】：

你能展示你有什么代码以及你尝试过什么吗？
我已经添加了html的一部分。您将看到所有车把模板都在 index.html 中。所有其他脚本文件都通过适当的
看看这个答案，它可能就是你要找的：stackoverflow.com/questions/18028066/…
@intuitivepixel 我对 Ember 比较陌生，希望我可以简单地将把手模板移动到磁盘上的文件中，然后在 index.html 中引用它们。在这个阶段，我想阻止使用另一组库或工具，例如 Require.js 或 Ember app kit ...有没有办法将车把模板存储为 hbs 文件，然后在 index.html 中引用它们？

标签： ember.js handlebars.js

【解决方案1】：

您可以使用自定义解析器按需加载模板。这将适用于开发目的。主要的警告是模板加载是synchronous。在获取模板时，您的页面将被阻止。

下面的Resolver 从templates 文件夹加载模板。您将需要镜像您的文件结构以对应于 html 中模板的 data-template-name 或 id。

App = Ember.Application.create({
  resolver: Ember.DefaultResolver.extend({
    resolveTemplate: function (parsedName) {
      var template = this._super(parsedName);

      if (!template) {
        var templateName = parsedName.fullNameWithoutType.replace(/\./g, "/"),
        filePath = "templates/" + templateName + ".js";

        $.ajax({
          url: filePath,
          async: false,
          dataType: "script"
        });

        template = this._super(parsedName);
      }

      return template;
    }
  })
});

此代码来自此gist。有关它的更多详细讨论，请参见issue。

注意：仅将 async 设置为 true 将不起作用，因为模板查找是 synchronous。

【讨论】：

这很好用！唯一的缺点是您还需要提供单独的“.index”模板文件。如果在 index.html 文件中没有找到这样的“.index”模板，解析器会尝试通过 Ajax 加载它，如果丢失则错误 404 ...