CODEWITHSUNDEEP
ember.js
Coder1
Coder1

Reputation: 13321

Remote AJAX data to controller

The code below works as I would expect it to in that I can access the data in the environments template via content.dev.name.

I'm struggling with populating this data via an AJAX request though.

I have one rest API that returns the structure as in the controller below. It needs to be called once when the app loads.

Here is my working code:

Controller

App.EnvironmentsController = Ember.Controller.extend();
App.EnvironmentsController.reopenClass({
  find: function(){
    return {dev: {key: 'dev', name: 'Development'}, prod: {key: 'prod', name: 'Production'}};
    return this.content;
  },
});
App.EnvironmentsView = Ember.View.extend({
  templateName: 'environments'
});

Route

...
router.get('applicationController').connectOutlet('environments', App.EnvironmentsController.find());
...

Template

  <script type="text/x-handlebars" data-template-name="environments">
    <ul id="env-menu">
      {{#with content}}
        <li>{{dev.name}}</li>
        <li>{{prod.name}}</li>
      {{/with}}
    </ul>
  </script>

And here is the controller with AJAX that I cannot get the data through to the template with the same format.

Note: I know response.data.environments itself is returning the same structure as my manually coded object above.

App.EnvironmentsController = Ember.Controller.extend();
App.EnvironmentsController.reopenClass({
  environments: {},
  find: function(){
    $.ajax({
      url: 'http://localhost:3000/environments',
      dataType: 'json',
      context: this,
      success: function(response){
        this.environments = response.data.environments;
      }
    });
    return this.environments;
  },
});
App.EnvironmentsView = Ember.View.extend({
  templateName: 'environments'
});

Note, I had something similar working when the controller was an array controller, and the data was being returned as an array. I need to know how to get this working with objects specifically.

Update: More info from questions

Here is a fiddle: http://jsfiddle.net/coder1/csvZX/

I am open to a different pattern. I'm just trying to wrap my head around fetching an object via and and sending it through the controller.

This is a pretty awesome tutorial ( http://trek.github.com/ ) I started with, and I can make this work with an array controller, just not when I'm working with a single object.

Upvotes: 1

Views: 1661

Answers (2)

CraigTeegarden
CraigTeegarden

Reputation: 8251

I tweaked your jsfiddle and it now displays your data correctly.

The key is that the data is handled by a model, not the controller. I modified your original jsfiddle and broke out the data loading portion into a class that is responsible for creating instances of itself in the find() function. This is the same way Trek's example works.

New model code:

App.Environments = Ember.Object.extend({

});
App.Environments.reopenClass({
    find: function() {
        var env = App.Environments.create({});
        console.log("environments find()");
        // simulate an ajax call, hard coding response below
        setTimeout(function() {
            // Fake response
            console.log("fake ajax response");
            console.log(env);
            env.setProperties({
                dev: {
                    key: 'dev',
                    name: 'Development'
                },
                prod: {
                    key: 'prod',
                    name: 'Production'
                }
            });
            console.log(env);
        }, 1000);
        return env;
    }
});

The fake ajax call to google didn't work so I switched it out and used a setTimeout() call to emulate the delay of an ajax call.

Notice that the find() method creates a new Environments object, then has the fake-ajax call populate it with data. find() immediately returns the newly created, empty Environments object, which is accessed by the controller and the template. The setProperties() method is used to update the properties of this in a way that Ember's bindings system can detect the changes and make sure they propagate into the template.

The only other thing is to update connectOutlets to use the new Environments model and :

router.get('applicationController').connectOutlet('environments', App.Environments.find());

This line of code calls find(), which returns the newly created Environments object and passes it to an instance of the EnvironmentsController controller, and fills the {{outlet}} in the application template with the EnvironmentsView view.

Make sure to check out the working jsfiddle example.

Upvotes: 4

sabithpocker
sabithpocker

Reputation: 15566

In my observation the possible mistakes you are doing is:

  1. this.environments = response.data.environments; should use set, addObject or something Ember way.

  2. If you are using variable environment instead of content use it in template as well.

Here is a fiddle http://jsfiddle.net/csvZX/17/

Upvotes: 1

Related Questions