2012-04-28 56 views
7

在backbone.js中,您必须手动设置每个模型的rooturl。有没有办法让我们在一个地方设置一次,所有模型都会使用它?在Backbone.js应用程序中设置全局REST根URL

例如, api.site.com将是REST服务,但出于测试目的,它可能在localhost:1000我需要能够轻松更改服务的根网址,而不是将它们放在应用程序中存在的许多模型中。

回答

2

不确定您的意思是什么意思手动为每个模型设置urlRoot。 想必你做

var MyModel = Backbone.Model.extend({ 

    urlRoot: '/mymodel', 
    ... 

}); 

对不对?那么每个模型实例自然具有相同的urlRoot。说MyOtherModel的任何其他模型实例将具有一些不同的urlRoot

如果由于某种原因您需要使用相同的urlRoot,我想这应该是因为模型共享属性。这应该暗示继承或扩展,所以你可以这样做:

var BaseModel = Backbone.Model.extend({ 
    urlRoot: '/mymodel' 
}); 

var MyModel = BaseModel.extend({ 
    ... 
}); 
8

我的理解是:

你有几种模式:模型1和模型2

根URL可以是http://api.site.comhttp://localhost:8080根据无论您是在本地还是外部工作。然后有一天,它可能是http://api.anothersite.com

我会做财产以后这样便:

// Global var before any other JS code, you comment line depending on which one applies 
var ROOT = 'http://api.site.com' 
// var ROOT = 'http://localhost:8080' 

var Model1 = Backbone.Model.extend({ 
urlRoot: ROOT+'/model1', 
... 
}); 

var Model2 = Backbone.Model.extend({ 
urlRoot: ROOT+'/model2', 
... 
}); 

但要小心,你可能会忘记commiting时从一个URL切换到另一个。更好的办法是处理相对路径,如果他们适用。

12

我一直在玩最优雅的方式来使用Backbone与AMD(require.js)。这就是我想到的,并且最好[迄今]。

首先,引导数据,如here所述。

的index.htm(应用进入点)

<!DOCTYPE html> 
<head> 
    <meta charset="utf-8"> 

    <script> 
    var require = { 
     config: { 
     // key name is module, value is data to give module 
     'models/Base': { 
      apiUrl: '/some/path/to/api', 
     } 
     } 
    } 
    </script> 
<script data-main="js/main" src="vendor/require/require-jquery.js"></script> 
</head> 
<body></body> 
</html> 

接下来,定义基类为骨干模型,如下:

JS /模型/ Base.js(注意这个模块名称与上面配置中的模块名称相匹配)

define(['module', 'backbone'], 
    function(module, Backbone){ 

    return Backbone.Model.extend({ 
     getApiUrl: function(){ 
     return module.config().apiUrl; 
     } 
    }); 

    } 
); 

最后,将所有从这个基准,这样你的骨干机型:

JS /模型/ user.js的

define(['models/Base'], 
    function(BaseModel){ 

    return BaseModel.extend({ 
     urlRoot: function(){ 
     return this.getApiUrl() + '/user'; 
     } 
     // ... more cool stuff here 
    }); 

    } 
); 

这是对于骨干网和Require.JS切向相关的earlier question I had

相关阅读:http://requirejs.org/docs/api.html#config-moduleconfig

0

刚刚从'/'开始您的网址。 因此,您不会依赖本地主机或真实域。

2

在我看来,最好的方法是覆盖Backbone.sync方法,并在其中加上根URL。这是因为知道API域不是模型的责任。

// Cache Backbone.sync for later use 
var sync = Backbone.sync; 
Backbone.sync = function(method, model, options){ 
    options.beforeSend = function(){ 
    this.url = API_ROOT_URL + this.url; 
    }; 
    return sync.call(this, method, model, options); 
}; 

然后你就可以创建你的模型,你通常会做:

var Resource = Backbone.Model.extend({ 
    urlRoot: '/resources', 
}); 

我使用同样的方法追加一个.json扩展到所有的URL通过浏览器缓存,以防止JSON闪烁。

+0

我不认为这个工程。 'beforeSend()'在用原始URL打开请求之后调用。 – mwhite 2016-01-26 21:06:53

+0

这正是'beforeSend'的用法; * beforeSend类型:函数(jqXHR jqXHR,PlainObject设置)一个预先请求的回调函数,可用于在jqXHR(jQuery 1.4.x,XMLHTTPRequest)对象发送之前修改它。使用它来设置自定义标题等.jqXHR和设置对象作为参数传递。这是一个Ajax事件。在beforeSend函数中返回false将取消请求。从jQuery 1.5开始,beforeSend选项将被调用,而不管请求的类型如何。* – 2016-01-26 21:14:31

+0

它是在请求被发送之前,但在被初始化之后(使用现有的url)。我的答案正常工作。 – mwhite 2016-01-26 21:18:52

2

https://coderwall.com/p/8ldaqw/add-a-root-url-to-all-backbone-api-request

var backboneSync = Backbone.sync; 

Backbone.sync = function (method, model, options) { 
    /* 
    * Change the `url` property of options to begin 
    * with the URL from settings 
    * This works because the options object gets sent as 
    * the jQuery ajax options, which includes the `url` property 
    */ 
    options = _.extend(options, { 
     url: API_ROOT + _.result(model, 'url') 
    }); 

    /* 
    * Call the stored original Backbone.sync 
    * method with the new url property 
    */ 
    backboneSync(method, model, options); 
}; 
0

这是真的老了后改编,但我认为我的版本可以成为有用的人。我使用require.js和我的服务器端和客户端完全分开的主干。我给知道客户端应用,在那里是在同一时间API根,当我宣布requirejs脚本:

<script 
    data-main="js/main" 
    data-api-url="https://api/v1/" 
    src="js/require.js"> 
</script> 

,然后我得到了我的骨干模块:

var $scriptEl = $('script[data-main]'), 
     base = $scriptEl.attr('data-api-url'); 

var BaseModel = Backbone.Model.extend({ 
    urlRoot: base 
}); 

var model = BaseModel.extend({}); 

这是最优雅的方式,我可以找到..

相关问题