1

私はかなり単純な 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>

ありがとうマーク

4

1 に答える 1