Raphael.js के साथ Ember.js का उपयोग करना: राफेल ऑब्जेक्ट्स के साथ एम्बर ऑब्जेक्ट्स को कैसे संबद्ध करें?

Question

मैं जिस एप्लिकेशन का निर्माण कर रहा हूं वह Ember.js और Raphael.js का उपयोग करता है। चूंकि मैं एम्बर.जेएस के लिए नया हूं, मुझे कुछ समस्याएं आ रही हैं कि दोनों को एक साथ कैसे बांधना है। मैंने पहले ही this demo देखा है, लेकिन यह मुझे केवल रास्ते का हिस्सा बनता है।

मुझे वाक्यांश मेरे सवाल का इस तरह से करते हैं:

के एक उदाहरण के रूप "todo" demo from Ember.js's documentation लेते हैं। मैं प्रत्येक छवि को एक छवि के साथ कैसे जोड़ सकता हूं, और उस छवि को राफेल ड्राइंग कैनवास पर प्रदर्शित किया जा सकता है जब टोडो आइटम पूरा नहीं होता है? स्पष्टीकरण के लिए, केवल 1 राफेल ड्राइंग सतह है जहां सभी छवियां प्रदर्शित की जाती हैं।

बस Ember.js डेमो में की तरह

, मैं मेरी कार्यसूची जानकारी के लिए जुड़नार उपयोग करना चाहते हैं, लेकिन मैं एक छवि क्षेत्र जोड़ना चाहते हैं:

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

कृपया मेरे साथ धैर्य रखें चूंकि मुझे एम्बर.जेएस के संपर्क में नहीं आया है। मुझे पता है कि

1. कहाँ और कैसे रेखाचित्र के सतह पर छवियों को कैसे जोड़ें,
2. कैसे जुड़े कार्य के isCompleted मूल्य के आधार पर एक छवि की दृश्यता टॉगल करने के लिए सतह
3. ड्राइंग राफेल प्रारंभ करने की जरूरत है।

Answer 1

जो भी ऑब्जेक्ट जिसमें आप छवि समापन डेटा संग्रहीत कर रहे हैं, आपको एक पर्यवेक्षक फ़ंक्शन होना चाहिए जो पूर्णता स्थिति में परिवर्तनों का जवाब दे। उस समारोह में, आप राफेल से छवि को जोड़ने/निकालने के लिए जो कुछ भी कर सकते हैं वह करेंगे। (क्षमा करें, मुझे राफेल नहीं पता है, इसलिए आपको यह नहीं बता सका कि उस समारोह में क्या है)।

पर्यवेक्षक को ऑब्जेक्ट.सेट ('छवि पूर्ण', सत्य/गलत) में हर बार बुलाया जाएगा;

उदाहरण:

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