URL与URL根之间有什么区别？

Question

我想知道使用 url 或 urlRoot 的区别。我已经阅读了文档 (backbonejs.org/#Model-url)，但在这方面我仍然觉得自己缺乏知识，我希望了解更多。何时必须使用 url？而在另一种情况下，何时必须使用 urlRoot？

- Monece Solis

---

请查看此链接：https://dev59.com/QWQn5IYBdhLWcg3wZGd4。该链接涉及Backbone.js中Models和Collections的URL设置问题。 - Animesh

Answer 1

.urlRoot只在Model中可用，当一个Model不属于任何Collection时或者你想要重写该Model所在的Collection的.url属性时，.urlRoot才会有用。

换句话说，当一个Model是某个已经设置了.url属性的Collection的一部分时，该Model既不需要.url属性也不需要.urlRoot属性。此时，该Model将使用该Collection的.url属性作为自己的.urlRoot。

这里有几个例子来说明它们之间的区别。当你运行这些脚本时，可以在浏览器的网络面板中看到http请求。

例子1.文章（Post）不属于任何Collection。urlRoot定义了URL的基础部分。当一个Model被获取时，它的ID会被附加到urlRoot后面。

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 */

<script src='http://code.jquery.com/jquery.js'></script>
<script src='http://underscorejs.org/underscore.js'></script>
<script src='http://backbonejs.org/backbone.js'></script>

例子 2. 在一个集合中的模型上调用 fetch 方法时，会使用集合的 url 作为 urlRoot

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 */

<script src='http://code.jquery.com/jquery.js'></script>
<script src='http://underscorejs.org/underscore.js'></script>
<script src='http://backbonejs.org/backbone.js'></script>

示例3： 在模型上设置url将直接为任何模型实例使用该URL。

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 */

<script src='http://code.jquery.com/jquery.js'></script>
<script src='http://underscorejs.org/underscore.js'></script>
<script src='http://backbonejs.org/backbone.js'></script>

例子 4. url 可以是一个函数，这时又变得有意义了。

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 */

<script src='http://code.jquery.com/jquery.js'></script>
<script src='http://underscorejs.org/underscore.js'></script>
<script src='http://backbonejs.org/backbone.js'></script>

- Yura