Question

我正在考虑制作一个网络应用，并正在考虑使用dojox / app来实现它。

我更倾向于使用更具编程性的dojo方法，但似乎dojox / app主要是声明性的。

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

Hay，伙计们，   我一直在看dojox.app的liveocs，虽然看起来很酷但我不得不说一些东西对我来说并不清楚。

具体来说，是＆＃34;模板＆＃34;视图属性 - 指定html文件 - ＆gt;必须或可选？

这是在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，您还需要：

LifeCycle http://dojotoolkit.org/reference-guide/1.10/dijit/_WidgetBase.html#id5的概念。生命周期注入点将允许您使用JavaScript本机API修改模板的DOM树，因此您不必在全部属性中使用 data-dojo 。您将在 buildRendering 阶段将节点捕获为私有类属性，以便可以在父实例化期间将构造函数参数应用于它们。最后，您将返回 postCreate（）或 startup（）中的最终DOM，具体取决于您是否需要专门处理子组件。
Evented http://dojotoolkit.org/reference-guide/1.10/dojo/Evented.html的概念。这是您需要以编程方式执行 widgetInstance.on（“someEvent”，eventHandler）

我在templateString的HTML标记中使用的自定义属性是 data-dojo-attach-point 和 data-dojo-attach-event 。这些非常方便，节省了大量时间，使数据绑定更容易出错，自动将小部件的类属性与标记中的值相关联。虽然你也可以使用innerHTML以编程方式完成这些工作，但我认为繁琐的样板代码量并不值得付出努力。

完成那个教程，如果到最后你不理解某些东西，请告诉我，我会详细说明（我不是那种只是在一个链接上发送问题并且没有详细说明材料的类型）。

以编程方式创建dojox / app视图而不使用HTML

1 个答案: