Ember.js待辦事項應用程序手柄模板問題

我對Ember很新，並且正在嘗試遵循ToDo應用程序教程。但是，我很難在我的index.html文件中生成句柄腳本。下面是索引文件看起來前車把腳本Ember.js待辦事項應用程序手柄模板問題

<!doctype html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Ember.js • TodoMVC</title> 
    <link rel="stylesheet" href="style.css"> 
    </head> 
    <body> 
    <section> 
    <section id="todoapp"> 
     <header id="header"> 
     <h1>todos</h1> 
     <input type="text" id="new-todo" placeholder="What needs to be done?" /> 
     </header> 

     <section id="main"> 
     <ul id="todo-list"> 
      <li class="completed"> 
      <input type="checkbox" class="toggle"> 
      <label>Learn Ember.js</label><button class="destroy"></button> 
      </li> 
      <li> 
      <input type="checkbox" class="toggle"> 
      <label>...</label><button class="destroy"></button> 
      </li> 
      <li> 
      <input type="checkbox" class="toggle"> 
      <label>Profit!</label><button class="destroy"></button> 
      </li> 
     </ul> 

     <input type="checkbox" id="toggle-all"> 
     </section> 

     <footer id="footer"> 
     <span id="todo-count"> 
      <strong>2</strong> todos left 
     </span> 
     <ul id="filters"> 
      <li> 
      <a href="all" class="selected">All</a> 
      </li> 
      <li> 
      <a href="active">Active</a> 
      </li> 
      <li> 
      <a href="completed">Completed</a> 
      </li> 
     </ul> 

     <button id="clear-completed"> 
      Clear completed (1) 
     </button> 
     </footer> 
    </section> 

    <footer id="info"> 
     <p>Double-click to edit a todo</p> 
    </footer> 

    <script src="js/libs/jquery-1.10.2.min.js"></script> 
    <script src="js/libs/handlebars-1.1.2.js"></script> 
    <script src="js/libs/ember-1.4.0.js"></script> 
    <script src="js/libs/ember-data.js"></script> 
    <script src="js/application.js"></script> 
    <script src="js/router.js"></script> 
    </body> 
</html>

然而，當我身體元素內包裹車把腳本標籤，其他HTML元素無法正常渲染。該代碼不會在我的瀏覽器中運行，並且我懷疑該腳本在某處丟失了關閉元素。我不知道在哪裏。有沒有人有任何指針。非常感謝，並提前感謝你。

<script type="text/x-handlebars" data-template-name="todos"> 
    <section> 
    <section id="todoapp"> 
     <header id="header"> 
     <h1>todos</h1> 
     <input type="text" id="new-todo" placeholder="What needs to be done?" /> 
     </header> 

     <section id="main"> 
     <ul id="todo-list"> 
      <li class="completed"> 
      <input type="checkbox" class="toggle"> 
      <label>Learn Ember.js</label><button class="destroy"></button> 
      </li> 
      <li> 
      <input type="checkbox" class="toggle"> 
      <label>...</label><button class="destroy"></button> 
      </li> 
      <li> 
      <input type="checkbox" class="toggle"> 
      <label>Profit!</label><button class="destroy"></button> 
      </li> 
     </ul> 

     <input type="checkbox" id="toggle-all"> 
     </section> 

     <footer id="footer"> 
     <span id="todo-count"> 
      <strong>2</strong> todos left 
     </span> 
     <ul id="filters"> 
      <li> 
      <a href="all" class="selected">All</a> 
      </li> 
      <li> 
      <a href="active">Active</a> 
      </li> 
      <li> 
      <a href="completed">Completed</a> 
      </li> 
     </ul> 

     <button id="clear-completed"> 
      Clear completed (1) 
     </button> 
     </footer> 
    </section> 

    <footer id="info"> 
     <p>Double-click to edit a todo</p> 
    </footer> 
    </script>

來源

2014-02-15 GabeLafontant

-2

你不能在< script> element !!上寫html。

來源

2014-02-15 21:54:04 abdulrhman

那你還想怎麼在index.html文件中包含handlebars腳本標記？我很困惑。 – GabeLafontant

@abdulrhman，你能否爲GabeLafontant添加一些更具體的細節，以便他能解決這個問題？我會添加一個答案，看看我們是否可以解決這個問題... –

我沒有答案，但由評論者的答案徹底迷惑。從我見過的每個教程中，您將把手模板放置在index.html文件中。該腳本標籤通常包含一些html以及handlebars助手。爲什麼你不能在元素中寫html？這裏是鏈接http://emberjs.com/guides/getting-started/adding-a-route-and-template/ – GabeLafontant

我不完全確定是什麼問題，但我會檢查所有的js文件是否正確加載。我實際上嘗試了使用JS Bin的here ToDo演示，我沒有看到它在工作。但是，在獲取代碼並放入一個jsfiddle之後，它的源代碼將被加載到<head>標記中，實際上它已經工作。

這是鏈接到jsfiddle和這裏鏈接到live version。我會檢查第二個鏈接上的輸出，看看它和你的代碼有什麼不同。

希望你能解決你的問題！

來源

2014-02-15 22:39:16

我在完成教程時遇到了同樣的問題。訣竅在於腳本包括的順序。確保首先包含框架依賴關係，然後包含application.js，最後包含router.js。見下：

<!-- ... Ember.js and other javascript dependencies ... --> 
<script src="js/libs/jquery-1.10.2.min.js"></script> 
<script src="js/libs/handlebars-1.0.0.js"></script> 
<script src="js/libs/ember.js"></script> 
<script src="js/libs/ember-data.js"></script> 
<script src="js/application.js"></script> 
<script src="js/router.js"></script>

來源

2014-07-12 21:06:06

Ember.js待辦事項應用程序手柄模板問題

回答

相關問題