Öğe listesinden öğeleri gösterme Backbone.js

Question

Backbone'da yeni görevdeyim. Todo MVC ile başladım ve şimdi test uygulaması yazmaya çalışıyorum. Uygulamamda, projenin listesi var ve bu projeyi görmek için bir projeye tıkladıktan sonra istiyorum. Aşağıdaki Kodum:

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

projeler-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> 

Bunu nasıl başarabiliriz? Herhangi bir tavsiye için teşekkürler!

Answer 1

Eğer tutma elemanı içinde href değiştiremezsiniz projelerin şablon # için projeler/<% = id% yerine no Daha önce omurgasını kullanmadıysanız> ama onların yönlendirici bu şekilde çalışması gerekir inanıyoruz