Please bear with me as this is obviously a newbie question. In using Highcharts, I’m trying to pass some processed json to a series, as a separate method. The method doesn’t get recognized the way I’m got it below, and neither can I get it to work as a computed property.
What am I missing?
Access to the properties of Ember Objects are behind get and set methods.
http://emberjs.com/api/classes/Ember.Object.html#method_get
http://emberjs.com/api/classes/Ember.Object.html#method_set
App.Foo = Ember.Object.extend({
myProperty: "somevalue"
});
var foo = App.Foo.create({});
value = foo.get('myProperty');
// "somevalue"
value = foo.set('myProperty', 'bar');
// myProperty is now 'bar'
For your coffee script example I think you want to do something like this
App.Graph = Ember.Object.extend
initialize: ->
# unrelated initialization stuff
processedJson: ->
# some processing of hard-coded json here...
[date,somevalue]
series: [{
# some config here
data: @get('processedJson')thanks @eccegordom, I did try using the getter actually, but @get() doesn’t seem to be available in this scope…
Uncaught TypeError: Object [object global] has no method ‘get’
Could this because series is set within the extend() block? According to this article on Ember.Object’s fundamentals, series is a property of the object’s prototype, and not of its instance. What I don’t get is, wouldn’t processedJson() be a method set in the prototype as well?
If they’re in different scopes for some reason, how do I access processedJson()'s scope from series?
Yeah, think of the Extend as meaning it is class that doesn’t exist yet. I think that is why the global warning here. Because App.Graph exists in the global namespace, but Ember has not had a chance to do much with it yet, e.g. create the setters and getters
You need to create an instance of App.Graph (probably in a controller object somewhere)
myGraph = App.Graph.create({});
You should try setting up a JS bin and I can help troubleshoot.
But hopefully that makes sense.
A couple more links that go into more detail about Objects and Instances
http://emberjs.com/guides/object-model/classes-and-instances/
http://emberjs.com/api/classes/Ember.Object.html
Also, important to know that Ember extends a few native prototypes
http://emberjs.com/guides/configuring-ember/disabling-prototype-extensions/
Because of this It might also be helpful to read up on Inheritance and the prototype chain in javascript
Hmm, that makes sense, about the accessors not yet being available. Slowly I’m getting the feel for how Ember models stuff. And thanks for all the resources… lot’s of homework to do : )
This is probably not a complete match, but it started clicking for me when I thought of js’s prototype as ruby’s singleton class, where class methods live… And ember’s extend() as a Class.new.
In the end I did something similar to what you suggested, separating the data part from Graph and making it a property of the graph controller. Then I pass it to graph after creating the instance. This works
App.Graph = Ember.Object.extend
series: null
initialize: (data)->
series = [{ data: data }]
@set('series', series)
App.GraphController = Ember.ObjectController.extend
data:
json = ...
json.map (a) ->
...
[date, somevalue]
render: ->
graph = App.Graph.create()
graph.initialize(@data())
new Highcharts.Chart(graph)
App.GraphView = Ember.View.extend
didInsertElement: ->
graph = new App.GraphController()
graph.render()Yeah, I think that is a close analogy, the concept of eigenclass (singleton) from ruby. There are probably some important nuances that I am not thinking of at the moment. But the concept seems close.
Javascript can be a weird language at times, but really powerful. And Ember can be tricky to figure out especially if you are coming at it with the wrong mental map. I know this trips me up from time to time.
Douglas Crockford has a nice series of Javascript videos that I found useful when learning some of this stuff.
Glad you were able to get it working. Ember can be really powerful once you get your head around it.
Good luck!