javascript - Backbone.js 单集合项 View

Question

我最近开始构建我的第一个 Backbone.js 项目，并且很难掌握如何处理单个项目的“单独 View ”。

例如，如果我有一个 todos 的列表由 Backbone 集合显示。如果我想让应用程序提供一个链接并查看单个待办事项，我该怎么做？我会创建一个新类型的集合并以某种方式通过单个项目的 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 直接来 self 的 MongoDB ID，并在 console.log 中返回，但是当我尝试在浏览器中运行它时，出现以下错误:Uncaught TypeError: undefined is not a function 这是指行 collection: LibraryCollection.get(bookID)

我的 LibraryCollection (./library) 包含以下内容:

'use strict';

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

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

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

/api/library/

[{"_id":"54a38070bdecad02c72a6ff4","name":"Book Name One"},{"_id":"54a38070bdecad02c72a6ff5","name":"Book Name Two"},{"_id":"54a38070bdecad02c72a6ff6","name":"Book Name Three"},{"_id":"54a38070bdecad02c72a6ff7","name":"Book Name Four"}]

/api/library/54a38070bdecad02c72a6ff4

{"_id":"54a38070bdecad02c72a6ff4","name":"Book Name One"}

编辑2

我已经为 singleBook 更新了我的路由器，如下所示:

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

Answer 1

非常推荐codeschool的 Backbone 类(class)here介绍 Backbone 。

您将拥有一组模型 (todo)。每个待办事项都有自己的 View ，并会显示模型数据，即待办事项描述。您可能希望有一个包装 View ，也称为 Collection View ，它将每个 View 作为一个 subview ，但在您开始时最好不要使用它。

关于路由器逻辑，请尝试将路由器中的功能视为 Controller 操作(假设您熟悉 MVC)。有许多主干扩展可以创建类似 MVC Controller 的功能。

对于您的问题，当您使用模板引擎呈现它时，您将在 View 中创建链接。我想到的几个引擎是 Underscore、Handlebars 和 Mustache。模板可能如下所示:

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

在这个模板中，我们传入了模型，您可以在大括号之间看到我们试图提取该模型的 ID 和描述。输出模型属性可能如下所示:

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

如果您只想获得一个模型，则需要确保该模型具有 urlRoot属性集。然后你需要像这样获取模型:

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

正如我之前所说，在您深入了解您的应用程序之前，我真的建议您观看一些关于主干的优秀教程。祝你好运!