Geek Answers Handbook

Backbone moves triggers twice in Firefox

Trying to use the Backbone navigation property.

this.navigate("week/" + companyName + "/" + employeeNo + "/" + weekEnd, { trigger: true, replace: false });

The code above is executed once.

He addresses this:

 routes: { "week/:companyName/:employeeNo/:weekEnd": "getWeek" },

And then this function gets hit twice:

 getWeek: function (companyName, employeeNo, weekEnd) { console.log('getWeek:', companyName, employeeNo, weekEnd); }

It is registered twice in Firefox, only once in IE and Chrome.

What is the problem here? I initially did not even have a trigger set to true, and Firefox ignored this and still called the URL.

+7
firefox url-routing
source share
2 answers

I recently had a similar problem when Firefox made two server calls after Backbone.navigate. In my case, this happened because we did not encode the string. Does your company name have any characters that need to be encoded?

You can try:

 this.navigate("week/" + escape(companyName) + "/" + employeeNo + "/" + weekEnd, { trigger: true, replace: false });
+6
source share

Entering when I came across the same problem and got into the main problem.

As mentioned earlier, the problem arises from URL encoding. Now about why the problem only appears in Firefox ...

Let's start by summarizing how the route is called when the hash changes. There are 3 key features here:

  • loadUrl : this function will call your route handler.
  • Navigate : This is the function used to change the route manually. If the trigger flag is set to true, the function will call loadUrl.
  • checkUrl : this function is set as a callback for the onhashchange event in the window object (when available, of course). It also starts loadUrl under certain conditions.

Now we get to the interesting part.

When you start navigation , Backbone will cache the fragment that you clicked on. A hash change will also be called, checkUrl . This function then checks whether the cache cache is equal to the current one, so as not to execute loadUrl if you previously called to move , because that would mean that it was already called. To make this comparison, checkUrl obtains the current hash using the getFragment function, which uses getHash . Here is the getHash code:

 getHash: function(window) { var match = (window || this).location.href.match(/#(.*)$/); return match ? match[1] : ''; },

And you have your problem. location.href is URI encoded in firefox but not in chrome. Therefore, if you switched to another hash ( with or without a trigger flag), in Firefox, Backbone will cache an unencrypted version of your hash, and then compare it with the encoded version. If your hash contains a required character, the result of the comparison will be negative, and the Backbone will execute a route handler that it should not.

According to the decision, well, people said this before, your URIs should be encoded.

+4
source share

More articles:


All Articles