backbone.js और raphäel.js/बैकबोन देखें <-> राफेल ऑब्जेक्ट

Question

और अब, कुछ अलग-अलग के लिए।

जब मैं "dom" ऑब्जेक्ट एक रैफेल ऑब्जेक्ट होता है तो मैं रीढ़ की हड्डी के दृश्य में ईवेंट कैसे प्रस्तुत कर सकता हूं। क्या यह बिल्कुल काम करता है? इस तरह:

var NodeView = Backbone.View.extend({ 
       events: { 
         "click": "click" 
       }, 
       click: function(){ 
         alert('clicked') 
       }, 
       render: function(){ 
         canvas.rect(this.model.get('xPos'), this.model.get('yPos'), 50, 50).attr({ 
          fill: "#EEEEEE", 
          stroke: "none", 
          cursor: "move" 
         }); 
         return this; 
       } 

    }); 

मैं जब राफेल वस्तु स्थिति बदल मॉडल अपडेट करने की जरूरत है। जब मैं रैफेल ऑब्जेक्ट को गंभीर रूप से ईवेंट संलग्न करता हूं तो मुझे केवल उस तक पहुंच होती है, न कि संपूर्ण दृश्य और इस प्रकार मॉडल के लिए।

Answer 1

यदि आप वास्तव में DOM तत्व का उपयोग कर रहे हैं तो यह काम करना चाहिए। जैसे यदि आपके पास राफेल ऑब्जेक्ट सर्कल है, तो DOM तत्व circle.node होगा। विकल्प में आपको "एल" संपत्ति के रूप में पास करने की आवश्यकता है या सुनिश्चित करें कि व्यू यह है। वास्तव में राफेल ऑब्जेक्ट की "नोड" संपत्ति है।

आप मैन्युअल रूप से घटना बाँध और, दृश्य को देखने के लिए ईवेंट हैंडलर में अंडरस्कोर के बाँध समारोह का उपयोग सक्षम होना चाहते हैं करना चाहते हैं:

$(circle.node).click(_.bind(someHandlerFunction, this)); 

जहां इस वर्तमान संदर्भ में दृश्य वस्तु पर ले जाना चाहिए । उस स्थिति में, कुछ हैंडलर फ़ंक्शन के अंदर, यह ऑब्जेक्ट दृश्य होगा।

Answer 2

इस मैन्युअल रूप से इस तरह Raphael's Element.node के लिए एक संदर्भ के साथ नए View.setElement method का उपयोग कर दृश्य निर्माता/प्रारंभकर्ता में this.el संपत्ति ओवरराइड करने के लिए है करने के लिए एक और तरीका है:

var NodeView = Backbone.View.extend({ 
    initialize: function (args) { 

     // create an empty reference to a Raphael rect element 
     this.element = canvas.rect(); 

     // // overwrite the default this.el by pointing to the DOM object in 
     // // Raphael. This works for older version of backbone.js 
     // this.el = this.element.node; 

     // in backbone 0.9.0+, you are not supposed to override the DOM object 
     // directly. rather, use the new setElement method which also takes 
     // care of the cached this.$el jquery object. 
     this.setElement(this.element.node); 

     // now that we have overwritten the default this.el DOM object, 
     // we need to rebind the events 
     this.delegateEvents(this.events); 
    }, 
    events: { 
     "click": "click" 
    }, 
    click: function(){ 
     alert('clicked'); 
    }, 
    render: function(){ 
     this.element.attr({ 
      x: this.model.get('xPos'), 
      y: this.model.get('yPos'), 
      width: 50, 
      height: 50, 
      fill: "#EEEEEE", 
      stroke: "none", 
      cursor: "move" 
     }); 
     return this; 
    } 
}); 

लाभ यहाँ है कि आप केवल करने की जरूरत है डीओएम को एक ही स्थान पर (रेंडर फ़ंक्शन में) संपादित करें और आप अभी भी बैकबोन.जेएस के उत्कृष्ट ईवेंट हैंडलिंग का लाभ उठा सकते हैं। मैं राफेल 2.0 के साथ मेरे लिए काम करने के लिए एक समान समाधान प्राप्त करने में सक्षम था। हालांकि मैं पार्टी के लिए थोड़ा देर हो चुकी हूं, मैंने सोचा कि मैं इसे पोस्ट करूंगा ताकि यह किसी और की मदद कर सके!

Answer 3

चेक करें: https://github.com/tomasAlabes/backbone.raphael

मैं इस मामले एक विस्तार बनाने को अलग करने की कोशिश की।