jquery - Ember.JS create record in component and add to local Datastore, or best practice solution -

current situation: trying find way create record of specific model within "didinsertelement" method of component, , add said data data store.

reason current situation: attaching event listeners button in component hbs file. 1 of buttons trigger 2 cascaded light ajax calls. response last of these ajax calls determine if should create records or not.

problem having: when try access store component:

var mystore = this.store 

i getting undefined object. of asking, have added following line component:

store: ember.inject.service() 

and have ember-data installed.

solutions: have found lot of research interaction store best done through main route. how attach event listeners component's jquery widget route?

are there solutions wouldn't require me move all event listener code component route , thereby undo modularity ember supposed offer?

this.store property exists on elements on injected default (controllers , routes) , should not used since skips getters, essential part of ember.

the proper way access in component (assuming injected it) via:

this.get('store') 

i have found lot of research interaction store best done through main route.

you want (at least in cases), access store data not in main route in controller in component exists , pass data component.

there few reasons this:

• routes main usage obtain data , control routing mechanism of app, user transitions to, @ points transition happens , why, etc. routes shouldn't control data shown , how, how/when obtained.
• controllers main usage data massaging, preparation, conversion, etc. includes things filtering data, sorting it, extracting subset etc.
• controller data directly available in templates, route data isn't.

the setupcontroller() hook in ember.route default.

this the default operation done in setupcontroller() hook:

set(controller, 'model', model); 

so controller has access model default , can pass on components.

this way separate logic extracts/obtains/handles data logic displays it.

i attaching event listeners button in component hbs file. 1 of buttons trigger 2 cascaded light ajax calls. response last of these ajax calls determine if should create records or not.

the natural way in ember, attach action button, propagate controller

// inside components/example.js // ... actions: {   mybuttonaction() {     // call controller action     this.get('controlleractionthatwaspassedin')(/* pass data if necessary */);   } } 

and have controller actual store operations , pass results if needed down component.

// controllers/example.js // ... actions: {   handledata(someargs) {     this.get('store)'.findsomething(someargs).then((result) => {       this.set('result', result); // set result automatically passed down component     });   } }  // templates/example.hbs {{my-component result=result                controlleractionthatwaspassedin=(action "handledata") }} 

in ember, concept called data down, actions up.

actions passed called closure actions, and, in fact, can return them work well:

// inside components/example.js // ... actions: {   mybuttonaction() {     // call controller action     this.get('controlleractionthatwaspassedin')(/* pass data if necessary */)       .then((result) => {         // stuff result       });   } } 

---

how attach event listeners component's jquery widget route?

note: anti-pattern

there isn't natural way of doing in ember, because routes , controllers created before gets rendered. that's why wouldn't want in route , in controller instead.

however, if perhaps don't need controller , want quick/small dom operation in route (note anti-pattern), can use ember run loop hooks , schedule operation happen after render:

export default ember.route.extend({   init() {     this._super(...arguments);      ember.run.scheduleonce('afterrender', () => {       $('.my-component').click(/* ... */)     });   } }); 

or can directly in rendertemplate() hook, after render content:

rendertemplate() {   this.render();   $('.my-component').click(/* ... */); // shouldn't though }