无法将车把数据导入模板

时间:2013-08-22 11:16:42

标签: ember.js handlebars.js ember-data mustache

我正在通过official documentation学习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报告的错误。请让我知道我错过了什么。

1 个答案:

答案 0 :(得分: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>

希望它有所帮助。