url 与 urlRoot 有什么区别

Question

我想知道使用url 或urlRoot 有什么区别。我已经阅读了文档（backbonejs.org/#Model-url），但我仍然觉得我缺乏这方面的知识，我想了解更多。什么时候必须使用url？在另一种情况下，您何时必须使用urlRoot？

Answer 1

.urlRoot 仅在模型中可用，并且仅在模型不是集合的一部分或您想要覆盖该模型所属集合的 .url 属性时才有用。

换句话说，当模型是具有.url 属性集的集合的一部分时，模型既不需要.url 也不需要.urlRoot 属性，在这种情况下，此模型将使用该集合的.url 作为它是自己的.urlRoot。

这里有几个例子可以说明差异。运行脚本时，可以在浏览器的网络面板中看到 http 请求。

示例 1. 帖子不是集合的一部分。 urlRoot 定义 url 的基本部分。获取模型时，它的 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>