在Backbone.js中呈现项列表中的项

Question

我是新来的骨干。我从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'
});

projects-view.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>

我怎样才能做到这一点？谢谢你的建议！

Answer 1

你不能把你的项目的锚-模板中的href更改为# %> /<%= id，而不是#我以前没有使用过主干，但是我相信他们的路由器应该这样工作