2010-11-12 5 views
9

मॉडल पर संपत्ति मूल्यों के साथ समन्वयित करने के लिए डोम तत्वों को रखने के लिए हर बार एक संपत्ति को अद्यतन/परिवर्तित किया जाता है (जॉन जॉन रेजिग की सरल विरासत http://ejohn.org/blog/simple-javascript-inheritance/ का उपयोग करके)। क्या यह एक क्रॉस-ब्राउज़र तरीके से करना संभव है? ऐसा लगता है कि अगर मैं गुणों को सेट करने के लिए जेएस का उपयोग करता हूं और इसे एक घटना में आग लगाना चाहता हूं, तो यह काम नहीं कर सकता है, मुझे यकीन नहीं है कि यह कैसे करें।जावास्क्रिप्ट संपत्ति परिवर्तन घटना

उत्तर

9

जावास्क्रिप्ट गुणों को सेट करने के लिए फ़ंक्शन का उपयोग नहीं करता है। वे केवल चर हैं, और उन्हें सेट करने के लिए किसी भी विस्तृत रैपर की आवश्यकता नहीं है। एक गेटर/सेटर व्यवस्था आप एक भाषा है कि कक्षाओं में निजी डेटा समर्थित में उपयोग कर सकते हैं की एक ही तरह -

आप संपत्ति है, हालांकि स्थापित करने के लिए एक समारोह का उपयोग कर सकते हैं। इस तरह आपका फ़ंक्शन आसानी से अन्य कार्यों को चला सकता है जो कॉलबैक के रूप में पंजीकृत हैं। JQuery का उपयोग करके आप उन्हें घटनाओं के रूप में भी संभाल सकते हैं।

$(yourObject).bind('some-event-you-made-up', function() { 
    // This code will run whenever some-event-you-made-up is triggered on yourObject 
}); 

// ... 

$(yourObject).trigger('some-event-you-made-up'); 
+3

यह वास्तव में "गेटर" और में वस्तु संपत्तियों के लिए "सेटर" कार्यों के लिए संभव है मोज़िला-विस्तारित जावास्क्रिप्ट। – Pointy

+4

या ईसीएमएस्क्रिप्ट 5 में। – casablanca

+0

समस्या यह है कि जिस वस्तु को मैं ईवेंट के लिए सुनना चाहता हूं वह एक jquery ऑब्जेक्ट नहीं है, केवल एक जेनेरिक ऑब्जेक्ट जो jquery ऑब्जेक्ट्स डेटा ऑब्जेक्ट में संग्रहीत है। मुझे नहीं पता कि इसे किसी घटना को कैसे बांधना है। – joshontheweb

3

हो सकता है कि आप पहले से ही jQuery बाँध/ट्रिगर के साथ अपने समस्या हल है, लेकिन मैं यह बताने के लिए कि मैं एक ट्रैकिंग बदलें निर्माण कर रहा हूँ और (उस के शीर्ष में) इकाई मॉडलिंग जावास्क्रिप्ट फ्रेमवर्क, नाम "तम्बू" है कि हल चाहता था समस्या आप ऑब्जेक्ट हेरफेर, इसके खुला स्रोत पर कोई विशेष सिंटेक्स की आवश्यकता के बिना संपर्क में है, और पर होस्ट:

https://github.com/benjamine/tent

यह JSDoc और इकाई js परीक्षण चालक के साथ परीक्षण के साथ दस्तावेज़ीकरण किया गया है।

var myobject = { name: 'john', age: 34 }; 

    // add a change handler that shows changes on alert dialogs 
    tent.changes.bind(myobject, function(change) { 
     alert('myobject property '+change.data.propertyName+' changed!'); 
    }); 

    myobject.name = 'charly'; // gets notified on an alert dialog 

यह सरणी के साथ काम करता भी बदल जाता है (कहते हैं, हटा देता है):

आप परिवर्तन ट्रैकिंग मॉड्यूल इस तरह से उपयोग कर सकते हैं। आगे आप संग्रहों, कैस्केड जोड़ों और हटाए गए समूहों पर समेकित सभी संशोधित परिवर्तनों (अतिरिक्त, हटाए गए, संशोधित आइटम) के परिवर्तनों को रखने के लिए "इकाई" संदर्भों का उपयोग कर सकते हैं, रिवर्स गुणों को समन्वयित रखें, 1-से-1 ट्रैक करें, 1-टू- एन और एन-टू-एम रिश्ते, आदि

+0

यह एक बहुत ही रोचक ढांचा है। –

0

आप की कोशिश कर सकते Javascript Property Events (jpe.js)

मैं ने वही समस्या का सामना करना पड़ा, और कहा कि संपत्तियों के लिए ईवेंट हैंडलर्स कहते हैं Object.defineProperty के लिए एक अधिभार समारोह लेखन समाप्त हो गया। यह प्रकार की जांच (जेएस-बेस-टाइप) भी प्रदान करता है और अवांछित परिवर्तनों को रोकने, आंतरिक रूप से इसके मूल्य को स्टोर करता है।

सामान्य defineProperty का नमूना: onchange घटना के साथ संपत्ति के

Object.defineProperty(document, "property", { 
    get:function(){return myProperty}, 
    set:function(value){myProperty = value}, 
}) 
var myProperty = false; 

नमूना:

Object.defineProperty(document, "property", { 
    default:false, 
    get:function(){}, 
    set:function(value){}, 
    onchange:function(event){console.info(event)} 
}) 
+0

मैं वहां एक "बदले" कार्यक्रम देखने के लिए चौंक गया था, लेकिन बाद में मैंने देखा कि यह एक ढांचा हैहा –

0

वस्तु defineProperty/defineProperties काम कर देता है। यहां एक साधारण कोड चला जाता है। मुझे लगता है कि के आधार पर बाध्यकारी चौखटे कुछ डेटा का निर्माण किया है, और यह वास्तव में जटिल हो सकता है, लेकिन इस तरह अपनी कसरत के लिए:

var oScope = { 
    $privateScope:{}, 
    notify:function(sPropertyPath){ 
     console.log(sPropertyPath,"changed"); 
    } 
}; 
Object.defineProperties(oScope,{ 
    myPropertyA:{ 
     get:function(){ 
      return oScope.$privateScope.myPropertyA 
     }, 
     set:function(oValue){ 
      oScope.$privateScope.myPropertyA = oValue; 
      oScope.notify("myPropertyA"); 
     } 
    } 
}); 

oScope.myPropertyA = "Some Value"; 
//console will log: myPropertyA changed