EmberJs घटक से AJAX कॉल करने का सही तरीका?

Question

मैं जानना चाहता हूं कि एम्बर घटक से अजाक्स कॉल करने का सही तरीका क्या है। उदाहरण के लिए

मैं एक पुन: प्रयोज्य घटक बनाना चाहता हूं जो कर्मचारी के आईडी द्वारा कर्मचारी खोज करता है, फिर जब प्रतिक्रिया सर्वर से वापस आती है तो मैं AJAX प्रतिक्रिया से डेटा के साथ मॉडल को अपडेट करना चाहता हूं।

मुझे नहीं पता कि यह करने का सही तरीका है, मैं वास्तव में एम्बरजे पर नया हूं।

export default Ember.Component.extend({ 
ajax: Ember.inject.service(), 
actions: { 
    doSearch() { 
     showLoadingData(); 
     var self = this; 
     this.get('ajax').post('http://server.ip.com/api/v1/getEmployee', { "id": this }).then(function(data) { 
      self.set('model.name', data.name); 
      self.set('model.position', data.position); 
      hideLoadingData(); 
     }); 
    } 
}}); 

Answer 1

संपादित करें: मैं सवाल गलत समझा है, तो यहां एक हो रहा है मेरे उत्तर का दिनांकित संस्करण:

सबसे पहले, मुझे लगता है कि आपको एम्बर-डेटा का उपयोग करने के लिए स्विच करना चाहिए। फिर आईडी द्वारा कर्मचारी को लाने से बस this.get("store").find("employee", id) पर कॉल करने का संकल्प होगा।

यदि आप सादा AJAX का उपयोग करना चाहते हैं, तो मेरा सुझाव है कि आप Service बनाते हैं जो विनिर्देशों (एपीआई एंडपॉइंट यूआरएल, डेटा प्रारूप, और इसी तरह) को समाहित करता है और केवल मॉडलों को ढूंढने और अपडेट करने के लिए सरल तरीकों का खुलासा करता है।

और अंत में, "डेटा डाउन, एक्शन अप" पैटर्न का अनुपालन करने के लिए, आपको इस घटक में मॉडल को अपडेट नहीं करना चाहिए। इसके बजाय माता-पिता नियंत्रक/घटक को एक क्रिया भेजें। इसलिए जैसा:

app/components/employee-selector.js (घटक आप लिख रहे हैं):

export default Ember.Component.extend({ 
    actions: { 
    updateId(id) { 
     Ember.$.post("http://server.ip.com/api/v1/getEmployee", { id: params.id }.then((response) => { 
     this.sendAction("select", response); 
    }); 
    } 
}); 

app/templates/new/it-request.hbs:

{{employee-selector select=(action "selectEmployee")}} 

app/controllers/new/it-request.js:

export default Ember.Controller.extend({ 
    actions: { 
    selectEmployee(employeeData) { 
     this.set("model.name", employeeData.name); 
     this.set("model.position", employeeData.name); 
    } 
    } 
}); 

पुराना जवाब:

एक बेवकूफ समाधान Route में ऐसा करना होगा।

सबसे पहले आप app/router.js में एक मार्ग जोड़ना चाहिए:

this.route("employees", function() { 
    this.route("show", { path: ":id" }); 
} 

से app/employees/show/route.js में मार्ग को परिभाषित:

import Ember from "ember"; 

export default Ember.Route.extend({ 
    model(params) { 
    return new Ember.RSVP.Promise((resolve, reject) { 
     Ember.$.post("http://server.ip.com/api/v1/getEmployee", { id: params.id }.then(
     (response) => { resolve(response) }, 
     reject 
    ); 
    }); 
    } 
}); 

(एकमात्र कारण मैं एक नया वादा में सब कुछ लिपटे प्रतिक्रिया अनुकूलन अनुमति देने के लिए है - बस उस कोड के साथ resolve(response) को प्रतिस्थापित करें जो सर्वर से कच्ची प्रतिक्रिया को बदलता है और resolve को इस रूपांतरित संस्करण के साथ आमंत्रित करता है)।

लेकिन यदि आपके पास एपीआई के साथ अधिक संचार होगा, और मुझे लगता है कि आप करेंगे, तो मैं सुझाव देता हूं कि आप एम्बर-डेटा या एम्बर (संभवतः कक्षा) के लिए किसी अन्य डेटा लेयर लाइब्रेरी का उपयोग करने का प्रयास करें।

या कम से कम service लिखें जो एपीआई के साथ सभी संचार को दूर करता है और कहीं भी कच्चे AJAX अनुरोधों का उपयोग करता है।

Answer 2

मैं एंबर वर्ग सीधे उपयोग कर रहा था कार्रवाई में तो यह इस

actions: { 
    doSomething() { 
    Ember.$.post('http://your-api-endpoint', data).then(function(response){ /* your callback code */}); 
    } 
} 

और अन्य तरीका हो के साथ संवाद करने की तरह दिखाई देता एंबर स्टोर का उपयोग करने (के रूप में आपने कहा था) तो मार्ग में आप प्राप्त कर सकते है से मॉडल हो

उदाहरण

App.PressRoute = Ember.Route.extend({ 
    route: "press", 
    controllerName: 'press', 
    model: function(params) { 
     var controller = this.controllerFor("Press"); 

     if(controller.get("loaded") == false) { 
      controller.set("loaded",true); 
      return this.store.find('Article',{limit: 200}); 
     } 
     else return this.store.all('Article'); 
    }, 
    renderTemplate: function() { 
     this.render('press'); 
    } 
}); 

Answer 3

ऐसे कई तरीके आप ऐसा कर सकते हैं!

सबसे पहले, एम्बर jQuery के लिए एक विश्वसनीय alias है: Ember.$। तो, यदि आप परिचित jQuery हैं, तो यह काफी आसान होना चाहिए।

तुम भी एंबर के RSVP पैकेज का उपयोग कर सकते हैं। अनुरोध करने के लिए और प्रतिक्रिया के साथ कुछ करने के लिए good example here है।

तीसरा, आप कर सकते हैं ember-ajax सेवा।

लेकिन क्या आप (ajax प्रतिक्रिया से डेटा के साथ मॉडल अपडेट) पूछ रहे हैं पहले से ही एंबर डाटा में बनाया गया है। आपको अपने एपीआई को एडाप्टर और/या एक सीरिएलाइज़र के साथ क्या एम्बर की उम्मीद है, उसे मैप करने की आवश्यकता होगी। एक बार जब आपकी सेवा एम्बर की अपेक्षा की जाती है, तो आप query your server for a single record कर सकते हैं और फिर इसे सहेज सकते हैं।