我正在通过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报告的错误。请让我知道我错过了什么。
答案 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>
希望它有所帮助。