数组有时显示长度为0 [英] Array displays length of 0 sometimes

问题描述

我有一个非常奇怪的问题.我有一个Backbone集合，并且正在使用where方法在集合中查找与某个属性匹配的模型.我的问题是结果不一致.

我有一个joinGoalList，它跟踪用户已加入的目标.假设该集合包含ID为1和3的两个目标.当用户访问/goals/3时，将显示一条消息，说明用户已加入目标

我在访问/goals/3时遇到问题，该消息显示的时间是一半，而另一半则是不显示.

奇怪的是，此问题仅在我的远程服务器上发生，而不在我的本地主机上发生.

在我的代码中，我向joinedGoalList查询ID为3的ID，如果匹配，我知道matches数组必须大于0，所以我呈现出表明用户已加入目标的消息./p>

这是代码(joinedGoalList是Backbone集合:

  console.log(joinedGoalList);
  var matches = joinedGoalList.where({id: this.model.get("id")});
  console.log(matches);
  console.log(matches.length);
  if (matches.length > 0) {
    console.log("the matches length is > 0");
    this.renderLeaveGoal();
  } else {
    console.log("the matches length is 0");
    this.renderJoinGoal();
  }

这是console.log(joinedGoalList)的结果，这是结果(它们是一致的):

child
_byCid: Object
_byId: Object
_callbacks: Object
length: 2
models: Array[2]
__proto__: ctor

如您所见，长度为2.其中一个对象的ID为1，另一个对象的ID为3.这在整个页面加载过程中都是一致的.

当我对ID为3的对象在数组上进行匹配时，会发生不一致.某些页面加载会找到匹配项，而其他页面加载会找不到匹配项.

在远程服务器上，console.log(matches.length)的结果为0或1，而在本地主机上，结果始终为1.

解决方案

我很确定事件的顺序是这样的:

1. 您在集合上调用 fetch 从服务器加载数据
2. 您调用console.log(joinedGoalList)，这在某些浏览器中是异步的.
3. 您调用 joinedGoalList.where 并找到一个空集合.
4. 1 中的fetch调用返回并填充集合.
5. 2 中的console.log调用执行并打印出填充的集合，该调用将引用joinedGoalList，并且该引用现在指向填充的集合.

在本地执行此操作时， 4 中的AJAX fetch会很快返回，因此在 3 之前执行步骤 4 .您期望的方式.

您在这里有几个选择:

1. fetch具有success回调:

   选项哈希采用success和error回调，这些回调将作为参数传递给(collection, response).

   因此，您可以使用success回调将调用where的任何内容延迟到服务器响应并填充集合为止.

2. fetch重置集合:

   从服务器返回模型数据时，集合将重置.

   和 reset 将

   用新的模型列表(或属性哈希)替换集合，最后触发单个"reset"事件.

   因此，您可以侦听"reset"事件并使用该事件触发调用where的任何事件.

I am having an extremely bizarre problem. I have a Backbone collection, and I am using the where method to find models in the collection that match a certain attribute. My problem is the inconsistency of the results.

I have a joinedGoalList which keeps track of goals that a user has joined. Let's say that this collection contains two goals with IDs of 1 and 3. When a user accesses /goals/3, a message should display saying that the user has joined the goal

I am having a problem where I am accessing /goals/3, and half the time the message displays, and the other half of the time, the message does not display.

The odd thing is that this problem only happens on my remote server and not on my local host.

In my code, I query the joinedGoalList for an ID of 3, and if it matches, I know that the matches array has to be greater than 0, so I render the message showing that the user has joined the goal.

Here is the code (joinedGoalList is a Backbone collection:

  console.log(joinedGoalList);
  var matches = joinedGoalList.where({id: this.model.get("id")});
  console.log(matches);
  console.log(matches.length);
  if (matches.length > 0) {
    console.log("the matches length is > 0");
    this.renderLeaveGoal();
  } else {
    console.log("the matches length is 0");
    this.renderJoinGoal();
  }

Here are the results of console.log(joinedGoalList), here are the results(they are consistent):

child
_byCid: Object
_byId: Object
_callbacks: Object
length: 2
models: Array[2]
__proto__: ctor

As you can see, the length is 2. One of the objects has an ID of 1 and the other object has an ID of 3. This is consistent throughout the page loads.

The inconsistency occurs when I do a match on the array for an object with an ID of 3. Some page loads find the match while other page loads do not find the match.

The results of console.log(matches.length) are either 0 or 1 on my remote server, yet on my localhost, the results are always 1.

解决方案

I'm pretty sure that the sequence of events goes like this:

1. You call fetch on the collection to load your data from the server.
2. You call console.log(joinedGoalList), this is asynchronous in some browsers.
3. You call joinedGoalList.where and find an empty collection.
4. The fetch call from 1 returns and populates the collection.
5. The console.log call from 2 executes and prints out the populated collection, this call will have a reference to joinedGoalList and that reference will now be pointing at a populated collection.

When you do this locally, the AJAX fetch in 4 returns quite quickly so step 4 occurs before 3 and everything behaves the way you'e expecting it to.

You have a couple options here:

1. fetch has a success callback:

   The options hash takes success and error callbacks which will be passed (collection, response) as arguments.

   So you could use the success callback to delay whatever is calling where until the server has responded and the collection is populated.

2. fetch resets the collection:

   When the model data returns from the server, the collection will reset.

   and reset will

   replace a collection with a new list of models (or attribute hashes), triggering a single "reset" event at the end.

   So you could listen for the "reset" event and use that event to trigger whatever is calling where.

这篇关于数组有时显示长度为0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！