在没有 HTML 的情况下以编程方式创建 dojox/app 视图

Question

我正在考虑制作一个网络应用程序，并且正在考虑使用 dojox/app 来完成它。

我更愿意对 dojo 使用更具程序化的方法，但似乎 dojox/app 主要是声明性的。

经过一番搜索，我找到了一个基本上问我同样问题的存档 http://dojo-toolkit.33424.n3.nabble.com/Questions-about-dojox-app-design-td3988709.html

Hay guys, I've been looking at the livedocs for dojox.app and while it seems quite cool I >have to say some stuff isn't clear to me.

Specifically, is the "template" property of views - specifying an html file - a >must or optional?

这是在 2012 年。

从那时起，我在文档的示例中找到了 customeApp 测试，它似乎在 dojox/app 中显示了基本的编程视图，但是我在理解它时遇到了一些困难。

我想像这样创建我的应用程序的不同视图

require([
  "dojo/dom",
  "dojo/ready",
  "dojox/mobile/Heading",
  "dojox/mobile/ToolBarButton"
], function(dom, ready, Heading, ToolBarButton){
  ready(function(){
    var heading = new Heading({
      id: "viewHeading",
      label: "World Clock"
    });
    heading.addChild(new ToolBarButton({label:"Edit"}));
    var tb = new ToolBarButton({
      icon:"mblDomButtonWhitePlus",
      style:"float:right;"
    });
    tb.on("click", function(){ console.log('+ was clicked'); });
    heading.addChild(tb);
    heading.placeAt(document.body);
    heading.startup();
  });
});

但我只能找到这样的例子

<div data-dojo-type="dojox/mobile/Heading" data-dojo-props='label:"World Clock"'>
  <span data-dojo-type="dojox/mobile/ToolBarButton">Edit</span>
  <span data-dojo-type="dojox/mobile/ToolBarButton"
        data-dojo-props='icon:"mblDomButtonWhitePlus"'
        style="float:right;" onclick="console.log('+ was clicked')"></span>
</div>

有没有办法以编程方式解决这个问题，或者我可以在某个地方找到关于这里发生的事情的一些说明 https://github.com/dmachi/dojox_application/tree/master/tests/customApp

Answer 1

当然可以。我长期以来一直以编程方式创建它们，并且相信它比模板化要好得多。处理框架的难点在于知道要搜索的关键字。我相信，您的答案可以通过学习 Dojo WidgetBase 以及任何其他使用 "Widget".

一词的内容找到

好的开始就在这里http://dojotoolkit.org/reference-guide/1.10/quickstart/writingWidgets.html。要成功使用 Dojo Widgets，您还需要：

生命周期的概念http://dojotoolkit.org/reference-guide/1.10/dijit/_WidgetBase.html#id5。生命周期注入点将允许您使用 JavaScript 本机 API 修改模板的 DOM 树，因此您不必在其中使用 data-dojo属性无处不在。您将在 buildRendering 阶段将节点捕获为私有 class 属性，以便您可以将构造函数参数应用到在父实例化期间传递的它们。最后在postCreate()或startup()中return最后的DOM，看你是否需要是否专门处理子组件。
事件的概念 http://dojotoolkit.org/reference-guide/1.10/dojo/Evented.html。这就是您需要以编程方式 widgetInstance.on("someEvent", eventHandler)

我在 templateString 的 HTML 标签中使用的唯一自定义属性是 data-dojo-attach-point 和 data-dojo-attach-事件。这些非常方便，可以节省大量时间并使数据绑定更不容易出错，自动将小部件的 class 属性与标签中的值连接起来。尽管您也可以使用 innerHTML 以编程方式执行这些操作，但在我看来，繁琐的样板代码数量不值得付出努力。

仔细阅读该教程，如果到最后您不明白什么，请告诉我，我会详细说明（我不是那种只会在 link 上发送提问者而不会费心详细说明的人material).

在没有 HTML 的情况下以编程方式创建 dojox/app 视图

Creating dojox/app Views Programmatically without HTML

javascript

dojo