डोजो एमवीसी

Question

के लिए लेआउट कार्यान्वयन मैंने शुरुआत से अच्छी प्रैक्टिस का उपयोग करके स्क्रैच से एक डोजो प्रोजेक्ट शुरू किया। मैं डोजो टूलकिट में वास्तव में नया हूं, इसलिए मैं कई दस्तावेज और नमूने के माध्यम से चल रहा हूं जो मुझे बहुत सी अच्छी चीजें छोड़ते हैं लेकिन भविष्य में देव (या ऐड-ऑन) के लिए आर्किटेक्चर को कार्यान्वित करने के तरीके पर कोई तरीका नहीं है। मैंने वेब की खोज की है और यह dojo boilerplate project पाया है जो इसे सभी को एक साथ रखने के लिए एक अच्छी शुरुआत प्रतीत होता है, लेकिन मुझे कुछ और चाहिए था, मैं एमवीसी पैटर्न को कार्यान्वित करना चाहता था (मुझे जावा देव पर रूवा और रूबी के साथ बहुत अनुभव है) मेरा आवेदन और इस very cool example पर आया। इसलिए, मैंने ऐसा कुछ बनाया जो मेरी परियोजना को व्यवस्थित करने का एक सुंदर कानूनी तरीका प्रतीत होता है। मुझे सही करो, अगर मैं गलत हूं .. या आपके पास बेहतर दृष्टिकोण है।

अब, मैं शुरू करने के लिए तैयार हूँ। मैंने डोजो टूलकिट वेबसाइट पर कुछ ट्यूटोरियल्स की कोशिश की है। आश्चर्यजनक रूप से भागो जब आपके पास केवल एक पृष्ठ है। लेकिन अभी, मैं सोच रहा था कि मैं अपने 0 आवेदन में इस layout tutorial को कैसे कार्यान्वित करूंगा।

require(["dijit/layout/BorderContainer", "dijit/layout/TabContainer", 
     "dijit/layout/ContentPane", "dojo/parser"]); 

: मैं लेआउट के इस प्रकार चाहते हैं अपने आवेदन के लिए अपने मुख्य लेआउट होने के लिए,

<div 
     id="appLayout" class="demoLayout" 
     data-dojo-type="dijit.layout.BorderContainer" 
     data-dojo-props="design: 'headline'"> 
    <div 
      class="centerPanel" 
      data-dojo-type="dijit.layout.ContentPane" 
      data-dojo-props="region: 'center'"> 
     <div> 
      <h4>Group 1 Content</h4> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     </div> 
     <div> 
      <h4>Group 2 Content</h4> 
     </div> 
     <div> 
      <h4>Group 3 Content</h4> 
     </div> 
    </div> 
    <div 
      class="edgePanel" 
      data-dojo-type="dijit.layout.ContentPane" 
      data-dojo-props="region: 'top'">Header content (top)</div> 
    <div 
     id="leftCol" class="edgePanel" 
     data-dojo-type="dijit.layout.ContentPane" 
     data-dojo-props="region: 'left', splitter: true">Sidebar content (left)</div> 
</div> 

लेकिन यह नहीं मिलता है (हां, तो मैं अपने index.html में कोड के उन टुकड़ों था की कोशिश की)

तो परिणाम मूल रूप से div और मेरा पाठ है, लेकिन कोई भी लेआउट नहीं है। मैं क्या खो रहा हूँ?

मेरा समाधान: मैं अपने सूचकांक (जैसे "कंटेनर") पर केवल एक div बनाउंगा और उसे लोडर (ऐप/run.js) से खिलाऊंगा, (जिसे मुख्य नामक एक और स्क्रिप्ट कहते हैं), यह main.js फ़ाइल एएमडी की अवधारणा का उपयोग कर रहा है (जिसे मैं परिचित होना शुरू कर रहा हूं), और वह मेरे आवेदन के किसी भी उदाहरण के निर्माण को संभालने में कामयाब रहा है। तो, उदाहरण के लिए, मैं मैं भी उपयोग अपने अनुप्रयोगों के लिए dojo boilerplate project मेरी लेआउट और उस फ़ाइल पर यह उदाहरण के लिए एक विशेष दृश्य ...

Answer 1

बना सकते हैं और यह मेरा main.js है:

define([ 'dojo/has', 'require', 'dojo/_base/sniff' ], function (has, require) { 
    var app = {}; 

    if (has('host-browser') && isCompatible()) { 

     require([ './EntryPoint', 'dojo/domReady!' ], function (EntryPoint) { 
      app.entryPoint = new EntryPoint().placeAt(document.body); 
      app.entryPoint.startup(); 
    } else { 
     window.location = "/admin/browser/"; 
    } 

    function isCompatible() { 
     // browser compatibility check here 
    } 
}); 

मेरे EntryPoint मॉड्यूल/वर्ग एक विजेट है, यानी EntryPoint.js की तरह दिखता है:

define([ 
    "dojo/_base/declare", 
    "dijit/_Widget", 
    "dijit/_TemplatedMixin", 
    "dijit/_WidgetsInTemplateMixin", 

    "dojo/i18n!app/nls/main", 
    "dojo/text!./ui/templates/EntryPoint.html", 

    "dijit/layout/BorderContainer", 
    "dijit/layout/StackContainer", 
    "dijit/layout/ContentPane" 
], function(
    declare, 
    _Widget, 
    _TemplatedMixin, 
    _WidgetsInTemplateMixin, 

    i18n, 
    template 
){ 
    return declare([_Widget, _TemplatedMixin, _WidgetsInTemplateMixin], { 

     templateString: template, 
     i18n: i18n, 

     postCreate: function() { 
      //... 
     } 

    }); 
}); 

अंत में

मेरी EntryPoint.html:

<div style="height:100%;"> 
    <div 
     data-dojo-type="dijit.layout.BorderContainer" 
     data-dojo-props="design: 'sidebar', gutters: false" 
     data-dojo-attach-point="mainContainer" 
     style="height:100%;" 
    > 

    <div 
     data-dojo-type="dijit.layout.BorderContainer" 
     data-dojo-props="region: 'left', splitter: true, design: 'headline', gutters: false" 
     data-dojo-attach-point="sidebarPane" 
     class="sidebarPane" 
    > 

     <div 
      data-dojo-type="dijit.layout.ContentPane" 
      data-dojo-props="region: 'center'" 
     > 

     <div class="sidebarSection">${i18n.title.public_}</div> 
     <div 
      id="sidebar-posts" 
      data-dojo-type="app.widget.SidebarItem" 
      data-dojo-props="iconClass: 'sidebarIconPosts', value:'posts', name: 'sidebar'"> 
      ${i18n.title.posts} 
     </div> 
     <div 
      id="sidebar-pages" 
      data-dojo-type="app.widget.SidebarItem" 
      data-dojo-props="iconClass: 'sidebarIconPages', value:'pages', name: 'sidebar'"> 
      ${i18n.title.pages} 
     </div> 

[...] 

आपका मुख्य लेआउट के रूप में Widget उपयोग करने का लाभ:

• एचटीएमएल टेम्पलेट डोजो निर्माण प्रणाली के साथ बॉक्स
• आप अपने लेआउट टेम्पलेट में data-dojo-attach-point और data-dojo-attach-event उपयोग कर सकते हैं के बाहर काम करता है
• आप उपयोग कर सकते हैं ${i18n.title.members} एचटीएमएल