web-dev-qa-db-ja.com

urlとurlRootの違いは何ですか

urlとurlRootの使用の違いを知りたいのですが。ドキュメント（ backbonejs.org/#Model-url ）を読みましたが、それでもこの分野の知識が不足していると感じており、もっと知りたいと思います。いつurlを使用する必要がありますか？また、別の例では、いつurlRootを使用する必要がありますか？

backbone.jsmarionette
21
Monece Solis

.urlRootはモデルでのみ使用可能であり、モデルがコレクションの一部ではない場合、またはそのモデルが含まれているコレクションの.urlプロパティをオーバーライドする場合にのみ役立ちます。

つまり、モデルが.urlプロパティが設定されたコレクションの一部である場合、モデルは.urlRootプロパティも.urlプロパティも必要としません。この場合、このモデルはそのコレクションの.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>

例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>

例4urlは関数である可能性があり、再び意味をなし始めます。

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>
32
Yura