कठपुतली - आवेदन और मॉड्यूल

Question

हम वर्तमान में एक कठपुतली आधारित अनुप्रयोग का निर्माण कर रहे के बीच संबंध। असल में, हम एक कठपुतली आवेदन उस पर परिभाषित कई क्षेत्रों है कि है। प्रत्येक क्षेत्र अलग मॉड्यूल अपने विचार को प्रदर्शित करने के लिए एक कंटेनर के रूप में कार्य करेगा। मैं चाहता हूं कि प्रत्येक मॉड्यूल के कंटेनर में जो दिख रहा है उसका पूर्ण नियंत्रण हो, लेकिन मैं चाहता हूं कि एप्लिकेशन इन क्षेत्रों को आवंटित करे। सादगी के लिए, मान लीजिए कि प्रत्येक मॉड्यूल में बस एक साधारण आइटम व्यू है।

मैं मॉड्यूल विचारों के साथ उन क्षेत्रों को आबाद करने के लिए 2 दृष्टिकोण पर विचार कर रहा हूँ।

पहले दृष्टिकोण का कहना है कि जब प्रत्येक मॉड्यूल आरंभ नहीं हो जाता, वह अपने दृश्य पैदा करेगा और यह उदाहरण के लिए, अपने दृश्य प्रदर्शित करने के लिए निर्दिष्ट क्षेत्र में आवेदन कॉल करेगा:

var app = new Marionette.Application(); 
app.addRegions({ 
    regionA: "#regionA", 
    regionB: "#regionB" 
}); 

app.module("moduleA", function(moduleA, app, ...){ 
    moduleA.on("start", function(){ 
     var viewA = new MyViewA(); 
     app.regionA.show(viewA); 
    } 
}); 

app.module("moduleB", function(moduleB, app, ...){ 
    moduleB.on("start", function(){ 
     var viewB = new MyViewB(); 
     app.regionB.show(viewB); 
    } 
}); 

दूसरा दृष्टिकोण कहता है कि प्रत्येक मॉड्यूल को कुछ फ़ंक्शन का खुलासा करना चाहिए जो इसके दृश्य को वापस कर देता है। आवेदन तैयार होने पर उस समारोह को कॉल करेगा और यह नामित क्षेत्र में दृश्य को छूएगा।

मुझे यकीन है कि जो दृष्टिकोण बेहतर है और राय सुनने के लिए खुशी होगी नहीं हूँ।

Answer 1

मैं निश्चित रूप से, दूसरे दृष्टिकोण के साथ जाना होगा अतीत अब मैं इस दृष्टिकोण की सीमाओं मार रहा हूँ और दूसरा दृष्टिकोण में जाने में पहली दृष्टिकोण के साथ चला गया करने के बाद। मैं here

Answer 2

यह निर्भर करता है कि आप कौन सी दृष्टिकोण लेते हैं, दोनों ठीक हैं, हम दूसरा विकल्प चुनते हैं क्योंकि हम अपने मॉड्यूल को गतिशील रूप से लोड करने के लिए require.js का उपयोग करते हैं।

var dashboardPage = Backbone.Marionette.Layout.extend({ 

     template: Handlebars.compile(tmpl), 

     regions: { 
     graphWidget  : "#graphWidget", 
     datePickerWidget: "#datePickerWidget", 
     searchWidget : "#searchWidget" 
     }, 

     widget: { 
      graphWidget: null, 
      datePickerWidget: null, 
      searchWidget: null, 
     }, 

initialize: function(options){ 

     this.someId= options.someId; 

     //if have someId ID - fetch model;   
     if(this.someId){ 
      //fetch model if campaignId not null 
      this.modelAjax = this.model.fetch(); 
     } 

     onShow: function() { 
      var that = this; 

      if(this.modelAjax){ 
      this.modelAjax.done(function(){ 

       that.widget.graphWidget= new graphWidget(graphWidgetOptions); 
       that.listenTo(that.widget.graphWidget, 'graphWidget', that.getGraphWidgetData, that); 
       .... 
       that.graphWidget.show(that.widget.graphWidget); 
       that.datePickerWidget.show(that.widget.datePickerWidget);