Używanie Ember.js z Raphael.js: Jak powiązać obiekty Ember z obiektami Raphael?

Question

Aplikacja, którą buduję, używa Ember.js i Raphael.js. Ponieważ jestem nowy w Ember.js, mam pewne problemy ze zrozumieniem, jak powiązać te dwa elementy. Widziałem już this demo, ale to tylko sprawia, że ​​jestem częścią drogi.

Pozwól mi frazę moje pytanie w ten sposób:

Weźmy "todo" demo from Ember.js's documentation jako przykład. Jak mogę powiązać obraz z każdym przedmiotem todo i czy obraz ten jest wyświetlany na płótnie rysunkowym Rafaella, gdy element todo nie jest ukończony? Aby wyjaśnić, istnieje tylko 1 powierzchnia rysunkowa Rafaela, na której wyświetlane są wszystkie obrazy.

Podobnie jak w demo ember.js chciałbym używać urządzeń do moich informacji todo, ale chciałbym dodać obrazu murawę:

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

prosimy o cierpliwość ze mną ponieważ nie miałem zbytniej styczności z Ember.js. Muszę wiedzieć

1. Gdzie i jak zainicjować Raphael rysunek powierzchni
2. Jak dodać obrazy do powierzchni rysunku
3. Jak przełączać widoczność obraz w oparciu o wartości isCompleted skojarzone z ikoną zadanie jest.

Answer 1

Niezależnie od tego, w jakim miejscu przechowujesz dane uzupełniania obrazu, musisz mieć funkcję obserwatora, która reaguje na zmiany w stanie ukończenia. W tej funkcji zrobiłbyś wszystko, co konieczne, aby dodać/usunąć obraz z Rafaela. (przepraszam, nie znam Rafaela, więc nie mogłem ci powiedzieć, co dokładnie zawiera ta funkcja).

Obserwator zostanie wywołany za każdym razem do Object.set ("imageCompleted", true/false);

Przykład:

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