2012-04-28 5 views
7

backbone.js में, आपको मैन्युअल रूप से प्रत्येक मॉडल का रूटुरल सेट करना होगा। क्या कोई तरीका है कि हम इसे एक ही स्थान पर एक बार सेट कर सकते हैं और सभी मॉडल इसका उपयोग करेंगे?बैकबोन.जेएस अनुप्रयोग में वैश्विक रीस्ट रूट यूआरएल सेट करना

उदाहरण के लिए। api.site.com आरईएसटी सेवा होगी, लेकिन परीक्षण के उद्देश्य के लिए, यह 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

क्या मुझे समझ में है: MODEL1 और MODEL2

जड़ URL या तो http://api.site.com या http://localhost:8080 आधार पर किया जा सकता है:

आप कई मॉडल है चाहे आप स्थानीय रूप से या बाहरी रूप से काम कर रहे हों। और किसी दिन यह हो सकता है http://api.anothersite.com

मैं इस तरह somthing तो करना होगा:

// 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', 
... 
}); 

लेकिन इस के साथ सावधान रहना, आप जब करने से एक यूआरएल से अन्य में स्विच करना भूल सकते हैं। यदि वे लागू होते हैं तो सापेक्ष पथों को संभालना बेहतर होता है।

12

मैं एएमडी (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 (इस मॉड्यूल को नोटिस नाम के ऊपर config)

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 विधि को ओवरराइड करके है, और वहां अपना रूट यूआरएल प्रीपेड करें। ऐसा इसलिए क्योंकि एपीआई डोमेन को जानने के लिए मॉडल की ज़िम्मेदारी नहीं है।

// 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 विस्तार संलग्न करने के लिए ब्राउज़र कैश के माध्यम से JSON चमक को रोकने के लिए।

+0

मुझे नहीं लगता कि यह काम करता है। मूल url के साथ अनुरोध पहले से ही खोला जाने के बाद पहले से भेजें() 'कहा जाता है। – mwhite

+0

यह वास्तव में 'preSend' का उपयोग है; * पहले भेजें प्रकार: फ़ंक्शन (jqXHR jqXHR, PlainObject सेटिंग्स) एक पूर्व-अनुरोध कॉलबैक फ़ंक्शन जिसका उपयोग jqXHR (jQuery 1.4.x, XMLHTTPRequest) ऑब्जेक्ट को भेजने से पहले संशोधित करने के लिए किया जा सकता है। कस्टम हेडर आदि सेट करने के लिए इसका उपयोग करें। JqXHR और सेटिंग्स ऑब्जेक्ट्स तर्क के रूप में पास किए जाते हैं। यह एक अजाक्स घटना है। पहले सेव फ़ंक्शन में झूठी वापसी अनुरोध को रद्द कर देगी। JQuery 1.5 के रूप में, अनुरोध के प्रकार के बावजूद पहले सेन्ड विकल्प को कॉल किया जाएगा। * –

+0

अनुरोध भेजने से पहले है लेकिन इसे प्रारंभ करने के बाद (मौजूदा यूआरएल के साथ)। मेरा जवाब सही ढंग से काम करता है। – mwhite

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 के साथ रीढ़ की हड्डी का उपयोग करता हूं और मेरा सर्वर-साइड और क्लाइंट-साइड पूरी तरह अलग हो जाता है। मैं जब मैं 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({}); 

यह सबसे है सुरुचिपूर्ण तरीका जो मुझे मिल सकता है ..

संबंधित मुद्दे