Javascript Backbone.js单个集合项视图

我最近开始构建我的第一个Backbone.js项目，很难掌握如何处理单个项目的“个人视图”

例如，我有一个由主干集合显示的列表。如果我想让应用程序提供一个指向单个todo项目的链接和视图，我该怎么做？我是否会创建一个新的集合类型，并以某种方式根据单个项目的id筛选集合？这种逻辑会存在于哪里？在路由器内

编辑

此后，我更新了我的路由器，如下所示：

var Backbone = require('backbone');
var IndexListing = require('./indexlisting');
var BookView = require('./bookview');
var LibraryCollection = require('./library');

module.exports = Backbone.Router.extend({

  routes: {
    '': 'allBooks',
    'book/:id': 'singleBook'
  },
  allBooks: function(){
    new IndexListing({
      el: '#main',
      collection: LibraryCollection
    }).render();
  },
  singleBook: function(bookID){
    console.log(bookID);
    new BookView({
      el: '#main',
      collection: LibraryCollection.get(bookID)
    }).render();
  }

});

bookID

直接来自我的MongoDB ID，并返回到

控制台.log

中，但是当我尝试在浏览器中运行此操作时，我得到以下错误：

Uncaught TypeError:undefined不是一个函数，它引用的是行
collection:LibraryCollection.get（bookID）

我的图书馆收藏（./library）包含以下内容：

'use strict';

 var Backbone = require('backbone');
 var Book = require('./book');

 module.exports = Backbone.Collection.extend({
   model: Book,
   url: '/api/library'
 });

GET请求的两个端点都返回以下内容：

/api/库/

/api/library/54a38070bdecad02c72a6ff4

编辑第2条

我已将我的路由器更新为
singleBook
，如下所示：

singleBook: function(id){
var lib = new LibraryCollection;
lib.fetch({
  success: function(){
    book = lib.get(id);
    new BookView({
      el: '#main',
      model: book
    }).render();
  }
});

}
我真的推荐codeschool主干课程作为主干入门课程

您将拥有一组模型（TODO）。每个todo都有自己的视图，并显示模型数据，即todo描述。您可能希望有一个包装器视图（也称为集合视图），该视图将每个视图都作为子视图，但在开始时最好不要使用它

关于路由器逻辑，试着把路由器中的功能想象成控制器动作（假设您熟悉MVC）。有许多主干扩展可以创建类似MVC控制器的功能

对于您的问题，您可以在使用模板引擎渲染视图时在视图中创建链接。脑海中浮现的几个引擎是下划线、把手和胡子。模板可能如下所示：

<a href="/todos/{{ id }}">{{ description }}</a>

{
    id: 1,
    description: "Go shopping"
}

var singleTodo = new Todo({id: 1});
singleTodo.fetch();

如果只想获取一个模型，则需要确保该模型具有属性集。然后，您需要按如下方式获取模型：

<a href="/todos/{{ id }}">{{ description }}</a>

{
    id: 1,
    description: "Go shopping"
}

var singleTodo = new Todo({id: 1});
singleTodo.fetch();

正如我之前所说的，在深入应用程序之前，我真的建议大家在主干网上观看一些不错的教程。祝你好运
 我猜您的意思是您试图导航到显示单个待办事项的页面？如果是，逻辑将存在于路由器中

var TodosRouter = Backbone.Router.extend({
  routes: {
   "todo": "allTodos"
   "todo/:todoId": "singleTodo"
   },
  allTodos: function() {
    // assume you have a todo listing view named TodoListing, extended from Backbone.View
    // which the view inside has the link to click and navigate to #todo/<todoId>
    var view = new TodoListing({
      el: $('body'),
      collection: YourTodosCollection
    }).render();
  },
  singleTodo: function(todoId) {
    // assume you have a todo single view named TodoView, extended from Backbone.View
    var view = new TodoView({
      el: $('body'),
      model: YourTodosCollection.get(todoId)
    }).render();
  }
});

fetch调用应该是异步的，因此我们可能希望显示一些加载指示符，并且只在fetch完成时呈现视图

this.model.fetch({
  success: function () { //call render }
})

所以我要对集合执行get？是的，条件是集合中的每个模型都有有效的Id属性（对于新模型，Id通常为null，并且希望服务器端在通过REST保存模型后提供新Id）。集合上的
get
是使用Id从集合中获取模型。我尝试实现您的解决方案，但遇到了一些问题。请参见上面的编辑。有什么想法吗？当然有。请参见上文。让我们尝试导出一个实例模块。exports=new Backbone.Collection.extend（{model:Book，url:'/api/library'}）（）；。。。然后在将集合提供给TodoListing/TodoView视图之前获取集合……无论如何，这里的流程有点混乱。。。。。假设在TodoView中，您只需传递todoId的ID，然后启动
Book
模型，并在设置ID后触发获取。