× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

What is the difference between url vs urlRoot

Yuriy Linnyk
Apr 06, 2016
<p><code>.urlRoot</code> is only available in a Model, and is only useful when either a model is not part of a collection, or when you want to override the <code>.url</code> property of the collection which that model is part of.</p> <p>In other words, a model doesn't require neither <code>.url</code> nor <code>.urlRoot</code> property when it is part of a collection with a <code>.url</code> property set, in which case this model will use that collection's <code>.url</code> as it's own <code>.urlRoot</code>.</p> <p>Here are several examples that show the difference. When you run the scripts, the http requests can be seen in browser's network panel.</p> <p><em>Example 1.</em> Post is not part of a collection. <code>urlRoot</code> defines the base part of the url. When a model is fetched, it's id is appended to the <code>urlRoot</code>.</p> <p></p><div class="snippet"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>var Post = Backbone.Model.extend({ urlRoot: 'http://jsonplaceholder.typicode.com/posts' }); var secondPost = new Post({ id: 2 }); secondPost.fetch(); /*requests http://jsonplaceholder.typicode.com/posts/2 */</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src='http://code.jquery.com/jquery.js'&gt;&lt;/script&gt; &lt;script src='http://underscorejs.org/underscore.js'&gt;&lt;/script&gt; &lt;script src='http://backbonejs.org/backbone.js'&gt;&lt;/script&gt;</code></pre> </div> </div> <p></p> <p><em>Example 2.</em> Calling fetch on a model which is a part of a collection uses the collection's <code>url</code> as the <code>urlRoot</code></p> <p></p><div class="snippet"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>var Post = Backbone.Model.extend(); var Posts = Backbone.Collection.extend({ url: 'http://jsonplaceholder.typicode.com/posts', model: Post }); var posts = new Posts(); posts.add({id: 2}); posts.first().fetch(); /*requests http://jsonplaceholder.typicode.com/posts/2 */</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src='http://code.jquery.com/jquery.js'&gt;&lt;/script&gt; &lt;script src='http://underscorejs.org/underscore.js'&gt;&lt;/script&gt; &lt;script src='http://backbonejs.org/backbone.js'&gt;&lt;/script&gt;</code></pre> </div> </div> <p></p> <p><em>Example 3.</em> <code>url</code> set on a model will literally use that url for any model instance.</p> <p></p><div class="snippet"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>var Post = Backbone.Model.extend({ url: 'http://jsonplaceholder.typicode.com/posts' }); var secondPost = new Post({ id: 2 }); secondPost.fetch(); /*requests http://jsonplaceholder.typicode.com/posts */</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src='http://code.jquery.com/jquery.js'&gt;&lt;/script&gt; &lt;script src='http://underscorejs.org/underscore.js'&gt;&lt;/script&gt; &lt;script src='http://backbonejs.org/backbone.js'&gt;&lt;/script&gt;</code></pre> </div> </div> <p></p> <p><em>Example 4.</em> <code>url</code> can be a function and it starts to make sense again.</p> <p></p><div class="snippet"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>var Post = Backbone.Model.extend({ url: function(){ return 'http://jsonplaceholder.typicode.com/posts/' + this.get('slug'); } }); var secondPost = new Post({ slug: 2 }); secondPost.fetch(); /*requests http://jsonplaceholder.typicode.com/posts/2 */</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src='http://code.jquery.com/jquery.js'&gt;&lt;/script&gt; &lt;script src='http://underscorejs.org/underscore.js'&gt;&lt;/script&gt; &lt;script src='http://backbonejs.org/backbone.js'&gt;&lt;/script&gt;</code></pre> </div> </div> <p></p> <p>This tip was originally posted on <a href="http://stackoverflow.com/questions/23510106/What%20is%20the%20difference%20between%20url%20vs%20urlRoot/33324142">Stack Overflow</a>.</p>
comments powered by Disqus