Backbone.js内のアイテムリストからアイテムをレンダーする

Question

私はバックボーンの初心者です。私はTodo MVCで始まりましたが、今はテストアプリを書こうとしています。私のアプリケーションでは、私はプロジェクトのリストを持っており、このプロジェクトを表示するために1つのプロジェクトをクリックした後にしたいと考えています。以下の私のコード：

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' 
}); 

件のプロジェクト-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％が代わりに＃の私は前にバックボーンを使用していない>が、私は彼らのルータがそのように動作しなければならないと考えている