CODEWITHSUNDEEP
javascriptjsonember.js
John Altar
John Altar

Reputation: 141

Having Problems with $.json in Ember

I am trying to use $.getJSON with Ember.js (Basically I am trying to avoid Ember-Data). Here's my code,

App = Ember.Application.Create();

App.Model = Ember.Object.extend({

});

App.Users = App.Model.extend({
    id: null,
    name: null
});


App.UsersRoute = Ember.Route.extend({
    model: function(){
        return App.Users.findAll();
    }
});

App.Users.reopenClass({
  findAll: function() {
    var result = Ember.ArrayProxy.create({content: []});

    $.getJSON('user.php', function(data) {
      $.each(data, function(i, row) {
        result.pushObject(App.Users.create(row));
      });
    });

    return result;
  }
});

and Here's my HTML:

<body>
        <script type="text/x-handlebars" data-template-name="MyTemplate">


            {{#each item in controller }}
            <tr><td>
             <p> {{item.name}}</p>
            </td></tr>
            {{/each}}

        </script>

        <script type="text/x-handlebars">
            <h1>Application Template</h1>
            {{outlet}}
        </script>

    </body>

Issue I am having is it is not the loading the model, do I need an controller too? Or anything else I am missing on my part?

Upvotes: 0

Views: 86

Answers (1)

mavilein
mavilein

Reputation: 11668

You just have a small typo at the creation of the Application.

App = Ember.Application.create();

PS: Your code looks fine. Only the router mapping is missing, but i guess you left that one intentionally out of your example.

Update:

You should define a mapping for your UsersRoute:

App.Router.map(function() {
  this.resource("users", { path: "/users" });
});

Your Template should be named accordingly as users:

<script type="text/x-handlebars" data-template-name="users">


            {{#each item in controller }}
            <tr><td>
             <p> {{item.name}}</p>
            </td></tr>
            {{/each}}

        </script>

And finally you should create a link to your Route in the main application template:

<script type="text/x-handlebars">
  <h1>Application Template</h1>
  {{outlet}}
  {{#linkTo "users"}} Link to UsersRoute{{/linkTo}}
</script>

Upvotes: 2

Related Questions