在Raphael.js中使用Ember.js：如何将Ember对象与Raphael对象相关联？

Question

The application that I'm building uses Ember.js and Raphael.js. Since I'm new to Ember.js, I'm having some issues understanding how to tie the two together. I have already seen this demo , but that only gets me part of the way.

Let me phrase my question this way:

Let's take the "todo" demo from Ember.js's documentation as an example. How could I associate an image with each todo item, and have that image displayed on a Raphael drawing canvas when the todo item is not completed? To clarify, there is only 1 Raphael drawing surface where all of the images are displayed.

Just like in the Ember.js demo, I'd like to use fixtures for my todo information, but I'd 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 since I haven't had much exposure to Ember.js. I need to know

1. Where and how to initialize the Raphael drawing surface
2. How to add the images to the drawing surface,
3. How to toggle a image's visibility based on the associated task's isCompleted value.

Answer 1

Whatever object in which you're storing the image completion data, you need to have an observer function that responds to changes in the completion status. In that function, you would do whatever is neccessary to add/remove the image from raphael. (sorry, I don't know raphael so couldn't tell you exactly what that function contains).

The observer would get called each time to 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')
  });