Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Please take a look at the code above: </p> <pre><code>&lt;html&gt; &lt;body&gt; &lt;div class="action"&gt; &lt;a name="routeOne" href="#routeTwo"&gt;routeOne&lt;/a&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;a name="routeTwo" href="#routeOne"&gt;routeTwo&lt;/a&gt; &lt;/div&gt; &lt;div class="output"&gt;&lt;/div&gt; &lt;script type="text/javascript" src="lib/jquery.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="lib/underscore.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="lib/backbone.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; var Approuter = Backbone.Router.extend({ initialize: function() { console.log('router initialized'); Backbone.history.start({pushState:true}); }, routes: { '': 'main', 'routeOne' : 'routeOne', 'routeTwo' : 'routeTwo' }, main: function() { console.log("main"); }, routeOne: function() { console.log("routeOne"); }, routeTwo: function() { console.log("routeTwo"); } }); var routes = new Approuter(); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Edit1: Differences between Routes and pushState</p> <p><strong>Backbone Routes</strong> enable you to monitoring <code>hasChange</code> history events (changes in url) and trigger some js code when found some change at url (<code>http://localhost/backbone-test/#someRoute</code>), That's amazing because we can trigger some complex actions done by user at your web site, just calling an url.</p> <p><strong>pushState</strong> enable you to hide this '#' hash and turn your url more readable, but as the backbone documentation said </p> <blockquote> <p>"if you have a route of /documents/100, your web server must be able to serve that page, if the browser visits that URL directly."</p> </blockquote> <p>Then, if you use <code>pushState:true</code> your url become more readable, <code>http://localhost/backbone-test/#someRoute</code> to <code>http://localhost/backbone-test/someRoute</code> but you need to create a back-end to answer directly access to you readable url.</p> <p><strong>When pushState is true and you call <code>href="#someRoute"</code> the browser understand this as a html anchor.</strong></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload