जावास्क्रिप्ट एमवीसी: नियंत्रक

Question

पर विचारों को कैसे सूचित करते हैं यदि मैं जावास्क्रिप्ट में किसी न किसी एमवीसी पैटर्न का पालन कर रहा हूं, तो नियंत्रक को सूचित करने के लिए दृश्य (जैसे button तत्व) का सबसे अच्छा तरीका क्या है?

क्या button एक ऐसी घटना को आग लगाना चाहिए जिसे नियंत्रक को सुनना है? या, button सीधे नियंत्रक फ़ंक्शन को कॉल करना चाहिए? या शायद नियंत्रक को घटना को देखने के लिए असाइन करना चाहिए?

किसी भी इनपुट के लिए धन्यवाद!

Answer 1

दिलचस्प सवाल। मुझे लगता है कि यह आपकी स्थिति, आपके उदाहरण की जटिलता और आपके द्वारा उपयोग किए जा रहे विशेष जावास्क्रिप्ट पैटर्न पर काफी निर्भर करेगा।

बटन आप के बारे में बात कर रहे हैं बस एक HTML तत्व है, तो यह एक आसान तरीका हो सकता है:

var MyController = function() { 

    this.particularMethod = function() { 
     // update model 
    } 

    // Using jquery 
    var button = $("#myButton"); 
    button.click(function() { myController.particularMethod() }) 
} 

या, यदि आपका button एक वस्तु या मॉड्यूल आपके द्वारा बनाए गए है, तो आप कर सकते थे एक कॉलबैक सेट:

var Button = function(selector, clickFunction) { 
    // Using jquery 
    $(selector).click(clickFunction) 
    ... 
} 

var MyController = function() { 

    this.particularMethod = function() { 
     // update model 
    } 

    var button = new Button("#myButton", this.particularMethod); 
    ... 
} 

दुर्भाग्य से, तुच्छ उदाहरण वास्तव में अलग-अलग दृष्टिकोण के लाभों को वर्णन नहीं है!

Answer 2

मैं कहूँगा कि देखें घटना बटन द्वारा चलाई पकड़ने और अपनी ही घटना है कि नियंत्रक द्वारा नियंत्रित किया जाएगा सक्रिय होना चाहिए।

मुझे स्पष्ट करने दें:

@raynos लिखा है:

नियंत्रकों इनपुट पर सुनने। इसका मतलब यह है नियंत्रकों डोम से नोड

व्यक्तिगत रूप से भले ही मैं पहली बार बयान मैं व्याख्या पसंद नहीं है के साथ सहमत घटनाओं पर सुनने।

इस कथन का पालन करने का अर्थ है कि नियंत्रक को यूआई और उसके आईडी/चयनकर्ता में प्रत्येक बटन/टेक्स्ट फ़ील्ड/तत्व के बारे में पता होना चाहिए।

मैं दृश्य भाषा अर्थपूर्ण घटनाओं जैसे "भाषा चयन" या "searchRequested" देखना पसंद करता हूं और ईवेंट में प्रासंगिक डेटा जोड़ता हूं।

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

यदि आप अब खोज बॉक्स और बटन के बजाय खोज शब्द लिंक दिखाने के लिए अपने ऐप के डिज़ाइन को बदलना चुनते हैं (या फिर यदि आपके पास दूसरी ओर - या अलग-अलग स्क्रीन पर भी है) केवल एक चीज जो आपको चाहिए परिवर्तन देखें।

एक तकनीकी अतिरिक्त नोट के: तो JQuery का उपयोग करने और आपके विचार संभालने का javascript ऑब्जेक्ट है आप

$(view).triggerHandler( 
    $.Event('eventName',{'object:'with','more':'event','related':'data'}) 
); 

का उपयोग घटना

और

$(view).on('eventName',handler); 

आग कर सकते हैं घटना सुनने और संभालने के लिए।

Answer 3

ऐसा करने के कई तरीके हैं। यहाँ एक रास्ता है।

var app = new App(); 

function App() { 
    var model = new Model(); 
    var view = new View(); 
    var controller = new Controller(view, model); 
} 

function Controller(view, model) { 
    view.addActionListener(function() { 
    alert("on activate"); 
    }); 
} 

function View() { 
    var self = this; 
    $("button").onclick = function() { 
    self.listener(); 
    } 
} 

View.prototype.addActionListener = function(listener) { 
    this.listener = listener; 
}