主干：从路由器中的URL获取未定义，但当集合从变量获取JSON时，它会工作

通过存储在变量中的JSON，我可以从名为

show:function（id）

的路由器函数中获取当前id的名称。然而，当我从URL而不是使用JSON变量获取集合时，我会得到一个未定义的TypeError

console.log(this.collection.get(id).get('name'));

我所看到的是，当我使用JSON变量时，

show函数

工作正常，但当我从URL获取时，

show函数

在

fetch

成功后执行

我做错了什么？为什么从URL获取未定义？我怎样才能让它工作

下面的代码是虚构的，它只显示了我代码的相关部分。请参见代码块末尾的两个案例。

---

当集合结束加载时，您需要触发路由器“显示”功能。 this.collection.fetch（{async:false}）；修复了您的问题，因为整个javascript代码都在等待（async:false）ajax调用在继续之前结束

另一个也是最好的解决方案是，在尝试使用结果之前，等待集合被提取

基本上：

MyCollection.fetch({
   success: function(model, reponse) {
      // do wtv you want with the result here or trigger router show method...
   }
});

---

这个怎么样？这已经有一段时间了，但这似乎是一个更好的方法来实现你的目标。基本概念是，一旦您导航到您的表演路线，它将执行表演。此方法将创建一个新的空集合，然后获取该集合的数据。除此之外，我们还传入了一个success方法（如François所示），该方法将在请求使用JSON（它创建了一个Heros集合）完成时执行

我认为，您遇到远程数据问题的原因是，在使用请求中的数据填充此.collection之前，您试图访问它

您必须记住，请求是异步的，这意味着在处理请求时代码继续执行

HeroesCollection = Backbone.Collection.extend({
  model: HeroesModel,
  url: 'http://example.com/heroes.json'
});

HeroesRouter = Backbone.Router.extend({
  routes: {
    '': 'index',
    ':id': 'show'
  },

  index: function() {

  },

  show: function(id) {
    this.herosCollection = new HerosCollection();
    this.herosCollection.fetch({
      success: function(collection, response, options) {
        console.log(this.get(id).get('name'));
      }
    });
  }

});

---

您的应用程序如何/何时导航到与

：id

匹配的路由？@TJ常见的导航方式是从索引页导航，其中每个项目都链接到其id；另一种导航方式是用ID粘贴准确的URL。我问你如何/何时使用上面的代码。如果在抓取完成之前直接在地址栏上键入一个id，显然这是行不通的，您需要处理这些事情。这就是你在做的吗？您在哪里创建显示提取数据的视图？是的，这就是我正在做的。我现在明白你的意思了。获取的数据在索引操作中创建。也许我应该强制用户在显示之前首先导航到索引。通常，如果您有一个显示特定模型信息的路由，则该路由可以在初始化视图之前获取该模型的数据，或者相反，视图可以在渲染之前获取模型数据。为此，你的后端应该有一个服务，发送单个项目的信息，而不是所有项目的列表…埃里克你的解决方案工作得很好，谢谢；但您认为通过每个路由操作获取数据是一种好的做法吗？考虑到我必须为索引操作获取数据。确定为什么不？走开！如果你不想，你可以将你的模型包装在API中，如果你担心往返，你可以在本地缓存你的回迁……但我认为这不是必要的，通常这是在视图中完成的，而不是在路由器中。然而，我不会说这是一个坏习惯。这取决于您希望如何组织代码。就我个人而言，我喜欢通过实例将视图与模型绑定在一起。我更希望有一个“控制器”，让控制器发出请求。在我看来，观点应该是“愚蠢的”。只需显示数据并对控制器编排的模型/集合更改作出反应。视图应仅触发事件，控制器应处理这些事件。为true，但主干中没有控制器（mv*stuff..）。但是，是的，编写真正的控制器而不是具有此角色的视图可能是一个好主意。

HeroesCollection = Backbone.Collection.extend({
  model: HeroesModel,
  url: 'http://example.com/heroes.json'
});

HeroesRouter = Backbone.Router.extend({
  routes: {
    '': 'index',
    ':id': 'show'
  },

  index: function() {

  },

  show: function(id) {
    this.herosCollection = new HerosCollection();
    this.herosCollection.fetch({
      success: function(collection, response, options) {
        console.log(this.get(id).get('name'));
      }
    });
  }

});