Loading/reloading data from an action function without changing the route

Question

I am just starting with ember and trying to do a simple test. Which, also very simple, got me stuck for some reason and I cant find the answer anywhere.

So I need load data from the server without transition to another route and do it from within a submit action (or any other action for that matter).

I have a simple input form where I type in manually an object ID and I want it to be loaded say right underneath. Simple enough. Seams to be a three minutes job in angular. Here, I just cant get the hang of communication between route and controller.

So given this little emblem

form submit="submit"
  = input type="text" value=oid
  button type="submit" Submit
#display
  = person

And this route

import Ember from 'ember';

export default Ember.Route.extend({
  model: {
      person: null
    },
  actions: {
   submit: function() {
     var oid = this.controllerFor('application').get('oid');
     var person = this.store.find('person', oid);
     this.modelFor('application').set('person', person);
   }
 }
});

This is as far as I could think. I want to click submit with ID of an object and I want that object loaded and displayed in the div#display.

So what am I doing wrong? What is the right way to do it?

First, I don't even know where to put such an action? Controller or route? If I put it in controller, I don't know how to refresh the model. If I put it in route, I am stuck with the above. Would be also nice to see how to do it if action was placed in the controller.

For simplicity I just do it all in application route, template, controller ...

Thank you

DeivinsonTejeda DeivinsonTejeda · Accepted Answer · 2015-07-04T12:26:59

The best place to put your code is on Controller given it responds to UI, so doing that on your controller the code is much more simple.

On this jsfiddle I have put some dummy code which tries to do something what you want to achieve.

//Index Route
App.IndexRoute = Ember.Route.extend({
   model: function () {
    return ['red', 'yellow', 'blue'];
   }
});

//Here my dummy controller.
App.IndexController = Ember.Controller.extend({
   oid: 1,
   actions: {
      submitAction() {
        //Here your logic to find record given the input and attach 
        //the response to the model object as UI is binding to model 
        //if you add/remove new records they will show up.
        //On this example I have added a new object.
        this.get('model').addObject('green');
      }
    }
 })

Enjoy!

Loading/reloading data from an action function without changing the route

1 Answers