Ember +把手：如何從HTML代碼中提取模板

我有一個相當簡單的Ember應用程序，但即使如此，在index.html文件中已經定義了大約30個把手模板。Ember +把手：如何從HTML代碼中提取模板

如何從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>

感謝馬克

來源

2013-08-03 cyclomarc

你可以顯示你有什麼代碼，你嘗試過什麼？ –

我已經添加了一部分html。你會看到所有的句柄模板都在index.html中。所有其他腳本文件均通過相應的

相關問題