2014-05-07 52 views
20

我想知道什麼是使用urlurlRoot之間的區別URL之間的區別。我已閱讀文檔(backbonejs.org/#Model-url),但我仍然覺得我缺乏這方面的知識,我想知道更多。你什麼時候需要使用url?在另一個例子中,您何時需要使用urlRoot是什麼VS urlRoot

+5

檢查這個http://stackoverflow.com/questions/16862014/backbone-js-models-and-collection-urls – Animesh

+0

非常感謝您! –

回答

29

.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調用取上的模型,該模型是一個集合的一部分使用集合的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將從字面上將該網址用於任何模型實例。

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>

相關問題