1

I have a rather simple Ember app, but even then there are already some 30 handlebars templates defined in the index.html file.

How can I extract these files from the html file and organize them identical to the models, controllers, routes, etc. script folders ?

At this moment, I do not want to pre-compile the templates (I understood Ember is not fully compatible with pre-compiled templates). I just want to have the templates better organised (in a folder structure) so that further development and maintenance becomes less error prone ...

Hope somebody can give some tips.

My index.html code:

<!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>

thanks Marc

4

1 回答 1

2

You can use a custom resolver to load the templates on demand. This will work fine for development purposes. The main caveat is the template loading is synchronous. Your page will block while the template is being fetched.

The below Resolver loads templates from the templates folder. You will need to mirror your file structure to correspond to the data-template-name or id of the templates in your html.

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;
    }
  })
});

This code is from this gist. For more a detailed discussion about it see this issue.

Note: just setting async to true won't work since template lookup is synchronous.

于 2013-08-03T16:12:22.150 回答