渲染Backbone.js中项目列表中的项目
Render item from items list in Backbone.js
我是Backbone的新手。我从Todo MVC开始,现在我正在尝试编写测试应用程序。在我的应用程序中,我有项目列表,我希望在单击一个项目后在视图中显示此项目。我下面的代码:
projects.json:
[
{
"id": 1,
"title": "First project",
"issues": [
{
"id": 11,
"title": "main issue",
"comment": "lorem ipsum",
"time": 30
},
{
"id": 12,
"title": "second issue",
"comment": "lorem ipsum",
"time": 60
}
]
},
{
"id": 2,
"title": "Second project",
"issues": [
{
"id": 21,
"title": "main issue",
"comment": "lorem ipsum",
"time": 90
},
{
"id": 22,
"title": "on more issue",
"comment": "lorem ipsum",
"time": 60
}
]
},
{
"id": 3,
"title": "Test project",
"issues": [
{
"id": 31,
"title": "main issue",
"comment": "lorem ipsum",
"time": 20
},
{
"id": 32,
"title": "second issue",
"comment": "lorem ipsum",
"time": 50
},
{
"id": 33,
"title": "new issue",
"comment": "lorem ipsum",
"time": 40
},
{
"id": 34,
"title": "recently added issue",
"comment": "lorem ipsum, lorem ipsum",
"time": 60
}
]
}
]
project.js:
var Project = Backbone.Model.extend({
defaults: {
title: '',
id: null,
issues: []
}
});
projects.js:
var ProjectList = Backbone.Collection.extend({
model: Project,
url: 'data/projects.json'
});
项目视图.js:
var ProjectsView = Backbone.View.extend({
el: ".project-list",
template: _.template($('#projects-template').html()),
render: function(eventName) {
_.each(this.model.models, function(project){
var projectsTemplate = this.template(project.toJSON());
$(this.el).append(projectsTemplate);
}, this);
return this;
}
});
var ProjectView = Backbone.View.extend({
el: '.issue-list',
template: _.template($('#project-template').html()),
render: function(eventName) {
_.each(this.model.models, function(project){
var projectTemplate = this.template(project.toJSON());
$(this.el).append(projectTemplate);
}, this);
return this;
}
});
router.js:
var Workspace = Backbone.Router.extend({
routes: {
'': 'projectsList',
'project/:id': 'issuesList'
},
projectsList: function(){
var projects = new ProjectList();
var projectsView = new ProjectsView({model: projects});
projects.fetch({
success: function() {
projectsView.render();
}
});
},
issuesList: function(id){
var project = new Project({id: id});
var projectView = new ProjectView({model: project});
project.fetch({
success: function() {
projectView.render();
}
})
}
});
var router = new Workspace();
Backbone.history.start();
index.html:
<section id="content">
<div class="col-xs-6 col-xs-offset-3">
<ul class="project-list issue-list list-group list-unstyled"></ul>
</div>
</section>
<script id="projects-template" type="text/template">
<li class="text-center">
<a href="#" class="list-group-item project"><%= title %></a>
</li>
</script>
<script id="project-template" type="text/template">
<li class="text-center">
<a href="#" class="list-group-item"><%= issues %></a>
</li>
</script>
<script src="lib/jquery-2.2.1.min.js"></script>
<script src="lib/underscore-min.js"></script>
<script src="lib/backbone-min.js"></script>
<script src="lib/backbone.localStorage.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="js/models/project.js"></script>
<script src="js/collection/projects.js"></script>
<script src="js/views/projects-view.js"></script>
<script src="js/routers/router.js"></script>
我怎样才能做到这一点?谢谢你的建议!
难道不能将项目模板锚中的href更改为#projects/<%=id%>而不是#我以前没有使用过主干网,但我相信他们的路由器应该以这种方式工作
相关文章:
- 角度的项目列表 ng 重复,ng 单击显示全宽描述
- 当在Ember中点击一个项目时,我如何将一个活动类添加到项目列表中
- 在javascript中搜索项目列表的性能
- 如何在角度js的自动完成下拉列表中对项目列表(按字母顺序)进行排序
- 从项目列表Jquery中仅选择(显示:块)元素
- 使用 JQuery 复选框筛选项目列表
- 如何在Javascript中设置随机生成的项目列表的样式
- 如何无限循环项目列表
- 将项目列表馈送到3列布局中
- Polymer 1.0:管理简单项目列表的最佳实践
- 从select创建项目列表/数组
- 渲染Backbone.js中项目列表中的项目
- 如何将特定项目信息链接到 emberjs 中项目列表中的模板
- 如何遍历项目列表并将其数据值推送到数组中
- NodeJS:如何使用异步.js来处理数据库中的项目列表
- 挖空 JS 构建项目列表
- 通过指定的文本检查项目列表 /w Jquery
- 如何制作一个项目列表,可以使用 Angular JS 单独切换
- 将单词“and”放在项目列表的文本中
- 优化显示简单项目列表的模型/视图