javascript - descargar - raphael js examples

Usando Ember.js con Raphael.js: ¿Cómo asociar objetos Ember con objetos de Raphael?

Question

La aplicación que estoy construyendo usa Ember.js y Raphael.js. Como soy nuevo en Ember.js, tengo algunos problemas para entender cómo vincular los dos. Ya he visto esta demostración , pero eso solo me lleva a una parte del camino.

Déjame formular mi pregunta de esta manera:

Tomemos la demostración de "todo" de la documentación de Ember.js como ejemplo. ¿Cómo podría asociar una imagen con cada elemento de tarea pendiente y hacer que esa imagen se muestre en un lienzo de dibujo de Raphael cuando no se completa el elemento de tarea? Para aclarar, solo hay 1 superficie de dibujo de Rafael donde se muestran todas las imágenes.

Al igual que en la demostración de Ember.js, me gustaría usar accesorios para la información de mi tarea, pero me gustaría agregar un campo de imagen :

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

Por favor tenga paciencia conmigo ya que no he tenido mucha exposición a Ember.js. necesito saber

1. Dónde y cómo inicializar la superficie de dibujo de Rafael
2. Cómo agregar las imágenes a la superficie de dibujo,
3. Cómo alternar la visibilidad de una imagen en función del valor de isCompleted de la tarea asociada.

Answer 1

Cualquiera que sea el objeto en el que esté almacenando los datos de finalización de la imagen, necesita tener una función de observador que responda a los cambios en el estado de finalización. En esa función, harías lo que fuera necesario para agregar / eliminar la imagen de Rafael. (Lo siento, no conozco a Rafael, así que no pude decirle exactamente qué contiene esa función).

El observador sería llamado cada vez a Object.set (''imageCompleted'', verdadero / falso);

Ejemplo:

  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'')
  });