0

私は公式ドキュメントを通じて ember.js を学んでおり、口ひげテンプレートを含む次の html ページを持っています。

 <section id="main">
      <ul id="todo-list">
        {{#each controller}}
        <li {{bindAttr class="isCompleted:completed"}}>
          <input type="checkbox" class="toggle">
          <label>{{title}}</label><button class="destroy"></button>
        </li>
        {{/each}}
      </ul>

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

ただし、問題は、ブラウザーがデータを次のように表示することです。

{{#each controller}}
  {{title}}
{{/each}}

テンプレートに提供されたシード データをレンダリングせずに。body タグの末尾の直前に、次の JavaScript 宣言があります。 

  <script src="js/libs/jquery.js"></script>
  <script src="js/libs/handlebars.js"></script>
  <script src="js/libs/ember.js"></script>
  <script src="js/libs/ember-data.js"></script>

  <script src="js/libs/application.js"></script>
  <script src="js/libs/router.js"></script>
  <script src="js/models/store.js"></script>
  <script src="js/models/todo.js"></script>

ページは、firebug によって報告されたエラーなしで読み込まれます。私が欠けているものを教えてください。

4

1 に答える 1

1

基本的な何かが欠けていると思います-「テンプレート」の周りのハンドルバースクリプトタグ。data-template-nameルートに応じて名前を付ける必要があります。ここapplicationでは例のためにのみ使用しました。埋め込まれたjsbinでhtmlパネルを有効にすると、あなたが言及した公式ガイドで、タグのすぐ下に、bodyという名前のラッピングスクリプトタグがあることがわかりますtodos。

<script type="text/x-handlebars" data-template-name="application">
 <section id="main">
  <ul id="todo-list">
    {{#each controller}}
    <li {{bindAttr class="isCompleted:completed"}}>
      <input type="checkbox" class="toggle">
      <label>{{title}}</label><button class="destroy"></button>
    </li>
    {{/each}}
  </ul>

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

それが役に立てば幸い。

于 2013-08-22T11:37:00.723 に答える