我正在深入研究Ember,并试图将一系列内容提供给我的路线模型。这是我的App.js代码:
var App = Ember.Application.create({});
App.Router.map(function() {
this.route('about');
this.resource('blogs');
this.resource('projects');
});
App.PROJECTS = [
{
"id": 1,
"title": "SnapFoo - SVG Animation Library",
"textone": "SnapFoo",
"texttwo": "SVG Animation Library",
"image": "snapfoo.jpg"
}
];
App.ProjectsRoute = Ember.Route.extend({
model: function() {
return App.PROJECTS;
}
});
PROJECTS数组是按内容缩写的,但格式是。现在,我试图在Hanldebars模板中运行我的每个循环,如下所示:
<script type="text/x-handlebars" data-template-name="projects">
{{#each}}
<div class="project-icon">
<span>{{textone}}</span>
<span>{{texttwo}}</span>
<a href="project.php?id=1"><img {{bind-attr alt="title" src="image"}}/></a>
</div>
{{/each}}
</script>
但是,这样做时,我收到的错误是 未捕获的TypeError:无法读取属性&#39; addDependency&#39;未定义的来自ember.min.js。
如果我删除{{each}}循环,则错误消失,这使我相信这与路径中的模型有关。但任何建议都会非常有帮助。谢谢!
答案 0 :(得分:1)
您在视图中缺少模型,您正在迭代{{each}}
在这种情况下,您需要将变量设为model
。
<script type="text/x-handlebars" data-template-name="projects">
{{#each model as |project|}}
<div class="project-icon">
<span>{{project.textone}}</span>
<span>{{project.texttwo}}</span>
<a href="project.php?id=1"><img {{bind-attr alt="title" src="image"}}/></a>
</div>
{{/each}}
</script>
我创建了一个example,您可以看到此代码的工作原理,它与您想要实现的非常相似。