我正在深入研究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:无法读取来自emer. min.js的未定义的属性'addDependency'。
如果我删除{{each}}循环,错误就会消失,这让我相信这与路由中的模型有关。但是任何建议都会非常有帮助。谢谢!
您缺少视图中的模型,您没有迭代任何内容{{each}}
在这种情况下,您需要将您的变量放在您的模型
中。
<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>
我创建了一个示例,您可以在其中看到此代码的工作原理,它与您想要实现的非常相似。