Using Ember.js with Raphael.js: How do I link Ember objects with Raphael objects?

Question

The application I create uses Ember.js and Raphael.js. Since I am new to Ember.js, I am having trouble understanding how to link them together. I have already seen this demo , but it only helps me with this.

Let me tell you about my question as follows:

As an example, take the todo demo from the Ember.js documentation . How can I associate an image with each todo element and display that image on the Raphael drawing canvas when the todo object is not completed? To clarify, there is only 1 Raphael drawing surface where the all images.

As in the demo version of Ember.js, I would like to use fixtures for my todo information, but I would like to add an image field:

Todos.Todo.FIXTURES = [ { id: 1, title: 'Learn Ember.js', isCompleted: true, image: 'some.png' }, { id: 2, title: '...', isCompleted: false, image: 'some_other.png' } ]; 

Please be patient with me, as I did not have much impact on Ember.js. I need to know

• Where and how to initialize Raphael's drawing surface
• How to add images to the surface of a drawing,
• How to switch the visibility of an image based on a related task isCompleted value.

Answer 1

Regardless of the object in which you store image completion data, you need to have an observer function that responds to changes in completion status. In this function, you will do everything you need to add / remove an image from raphael. (Sorry, I do not know raphael, so I could not say exactly what this function is).

The observer will be called every time in Object.set ('imageCompleted', true / false);

Example:

  App.RaphaelPainter = Ember.Object.extend({ imageCompleted:null, paintOnRaphaelCanvas:function(){ if(this.get('imageCompleted')){ // erase the image from raphael } else { // add the image to raphael } }.observes('imageCompleted') });