Question

我有一个相当简单的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>

感谢马克

Answer 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。

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

1 个答案: