在JSON对象数组中将对象作为具有匹配键的ember-model返回

Question

What I'm trying to accomplish is to return only one object to the model and loop through it's properties in a handlebars template. Thanx-a-Lot for any help!

My response looks like this:

{"U+554A":{
    "id":1,
   "unihex":"U+554A",
   "num_reference":"呵",
   "totalStrokes":10,
   "kMandarin":"a\n",
   "kDefinition":"exclamatory particle\n"},
 "U+611B":{
   "id":2,
   "unihex":"U+611B",
   "num_reference":"愛",
   "totalStrokes":13,
   "kMandarin":"\u00c3\u00a0i\n",
   "kDefinition":"love, be fond of, like\n"}
}

I tried everything. The most obvious being these two, just as a tryout, but the ember inspector shows no model is set:

    var sinograms = Ember.$.getJSON(apiurl);
    return sinograms['U+554A'];

I also tried:

    var sinograms = Ember.$.getJSON(apiurl);
    return sinograms[0];

NB: I can change the response format if necessary. I know it works when I loose the object-keys (without "U+554A"), but then how do I select the matching character.

@abuani: Upon your request. Thanx btw.

//app.js
App = Ember.Application.create();

App.Router.map(function() {
this.resource('signup');
this.resource('login');
this.resource('profile');
this.resource('overview');
this.resource('practice');
});

App.OverviewRoute = Ember.Route.extend({
model: function() {
    var url = 'http://localhost/~hiufung/RoadToChinese/index.php/api/sinograms/random?limit=2';
    var sinograms = Ember.$.getJSON(url);
    return sinograms;
}
});

//index.html (inline template)
<script type="text/x-handlebars" id="overview">
    <header class="bar bar-nav">
        <a class="icon icon-left pull-left" href="back"></a>        
            <h1 class="title">RoadToChinese</h1>
        <a id="showRightPush" class="icon icon-gear pull-right" href="overview-settings"></a>
    </header>
    <div class="content">
        <div class="content-padded">
            {{#each object in model}}
            <p>{{object.num_reference}}<p>
            {{/each}}
        </div>
    </div>
</script>

Answer 1

I can't add a comment to your initial question, but can you please post a few other pieces of code:

The router that's loading this(I imagine this is being done in your model function), the setupController if you have one, and the template that's trying to render the object. Without this information, there's little I can do to help.

EDIT Since there's code:

I should have noticed, your model is return an objects when Ember expects the model to be an array of objects. The first thing you should do is make the return from the server an Array. If you don't have control over this, then you can change your model to return

return Ember.A([sinograms]);

And that should work.

After that though, you can remove the nested object within each object. If you don't remove that, then you also need to make the inner objects an Array so you can iterate over it.

Let me know how this goes.

Here's the JSBIN