Collecting a value from JSON file with ember.js

Question

I am trying to pass a simple variable value into an HTML file using ember.js. My value is contained within a json file called value.json.

My HTML code is as follows:

 <h1>I won {{App.moneyvalue}} today!</h1>

However when I pass the json call via ember, it think that the entire call is a variable:

 App = Ember.Application.create({
   moneyvalue: function () {
     return $.getJSON( "js/value.json", function( data ) {
       return data.tot;
     });
   }
  }

And returns the following:

I won function () { return $.getJSON( "js/donors.json", function( data ) { return data.tot; }); } today!

As it seems to think that moneyvalue is a string variable as opposed to a value?

The jSON file is superbasic

{
  "tot": 100
}

Where is this going wrong?

Kingpin2k Kingpin2k · Accepted Answer · 2014-06-01T15:24:22

you're supplying Handlebars with a function, generally you would use a computed or normal property on the object. In this case you really just shouldn't define it in the application scope either, I'd recommend using an application route (it's the root route of your app).

App.ApplicationRoute = Ember.Route.extend({
  model: function(){
    return $.getJSON( "js/value.json");
  }
});

Then in your handlebars just use

<h1>I won {{tot}} today!</h1>

Here's an example: http://emberjs.jsbin.com/OxIDiVU/576/edit

Collecting a value from JSON file with ember.js

1 Answers