Asp.net mvc dojomvc的布局实现

我从一开始就尝试使用良好的实践，从零开始了一个dojo项目。我对DojoToolkit真的很陌生，所以我浏览了很多文档和示例，这些文档和示例给我留下了很多很酷的东西，但没有办法为未来的开发人员（或附加组件）实现一个体系结构。我在网上搜索了一下，发现这似乎是一个很好的开始，但是我想要更多的东西，我想在我的应用程序中实现MVC模式（我对JAVA和RubyonRails开发有很多经验），并且遇到了这个问题。所以，我创建了这样的东西，这似乎是组织我的项目的一种非常合法的方式。如果我错了，请纠正我。。或者你有更好的方法

现在，我准备开始了。我在DojoToolkit网站上尝试了一些教程。当你只有一页的时候，运行得非常好。但现在，我想知道如何在自己的应用程序中实现这一点。我希望这种布局成为我应用程序的主要布局（因此，我尝试将这些代码片段放入index.html中）

结果基本上是div和我的文本，但是没有任何布局。我错过了什么

我的解决方案是：我只在我的索引（例如“container”）上创建一个div，然后从加载器（app/run.js）（它调用另一个名为main的脚本）向他提供信息，这个main.js文件使用AMD的概念（我开始熟悉），他正在处理我的应用程序的任何实例的创建。例如，我可以为我的布局创建一个特定的视图，并在该文件中引用它

我也用于我的应用程序，这是我的

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> 

[...]

${i18n.title.public}
${i18n.title.posts}
${i18n.title.pages}
[...]

使用

小部件

作为主要布局的优势：

• html模板与dojo构建系统一起开箱即用
• 您可以在布局模板中使用

  数据dojo附加点

  和

  数据dojo附加事件

• 您可以使用

  ${i18n.title.members}

  替换html中的字符串

---

非常整洁！我刚刚做了一些非常类似的事情，但我为每个容器创建了每个实例（例如applayout.js、sidebar.js等），并在main.js中构建了所有内容。但我相信你的做法会更好，因为我可以想象分离太多会带来复杂性。至于你的html，我不知道你能真正做到“dojo/text！”/ui/templates/EntryPoint.html”。。。非常棒的东西。我还有一个问题。我试着做你做的事。。。我得到了和b4一样的结果？所以，基本上，我仍然得到templateString，但根本没有小部件。。。我猜“dijit/layout/BorderContainer”、“dijit/layout/StackContainer”、“dijit/layout/ContentPane”没有正确加载！假设您的

dojoConfig

设置为

parseOnLoad:true

。Dijit模板，例如EntryPoint.html，必须只有一个根元素，否则小部件实例化将失败。您的

dijit/layout

也可能被正确地解析和实例化（通过检查），但它的样式不正确，因此它的高度正好是它的内容的高度（通常是0px）。

dijit/layout

w/height（以百分比表示）的所有封闭节点都应明确定义

height

。在我的示例中，它意味着

html、body{height:100%；}

和模板根节点。我刚刚意识到不需要

parseOnLoad

，因为

EntryPoint

布局小部件是在main.js.hmm中通过编程创建的。。。我添加了一个HTML内容，效果如何？听起来templateMixin添加了一个“不需要的”行为，并更改了我的div root的id/类。。无论如何，它是固定的。再次感谢。

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() {
            //...
        }

    });
});

<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> 

[...]