Question

<div dojoType="dojo.Dialog" id="alarmCatDialog" bgColor="#FFFFFF" bgOpacity="0.4" toggle="standard">
<div class='dijitInline'>
       <input type='input' class='dateWidgetInput' dojoAttachPoint='numberOfDateNode' selected="true">
</div>

如何显示此对话框我尝试dijit.byId('alarmCatDialog').show();

上面的代码是一个模板，我从.js文件中调用了dijit.byId('alarmCatDialog').show()。

dojo.attr(this.numberOfDateNode)此代码有效，我得到了数据。但如果我将dojoattachpoint更改为id，那么我尝试dijit.byId('numberOfDateNode')将无效;

Answer 1

您的 numberOfDateNode 是一个普通的DOM节点，而不是widget / dijit，即扩展dijit/_Widget的javascript对象，这就是您无法通过{{1}获取对它的引用的原因}。请改用dijit.byId("numberOfDateNode")，然后就可以了。

dojo.byId("numberOfDateNode")或其HTML5有效版本dojoAttachPoint正在 dijit 模板中用于附加对DOM节点或子dijit的引用dijit javascript对象，这是data-dojo-attach-point引用您dijit.byId('alarmCatDialog').numberOfDateNode的原因。

使用<input type='input' class='dateWidgetInput' .../>的主要原因是：

您可以创建 dijit 的多个实例，因此您的模板无法通过ID识别节点/ dijit，因为您将拥有多个具有相同ID的节点/ dijit
这是一种优雅的声明方式，因此您的代码将不会充满data-dojo-attach-point。

Answer 2

跟踪什么是内容以及dijit.Dialog的模板是很重要的。一旦设置了对话框的内容，就会解析其标记 - 但不是以某种方式解析，以便将TemplatedMixin应用于content-markup-declared-widgets。

要成功实现模板，您需要类似于以下代码的内容，请注意我已经评论了attachPoints所在的位置。

This SitePen blog提供关于主题的好消息

define(
 [
   "dojo/declare",
    "dojo/_base/lang",
    "dijit/_Templated",
   "dijit/_Widget",
   "dijit/Dialog"
 ], function(
   declare,
    lang,
    _Templated,
    _Widget,
   Dialog
 ) {
  return declare("my.Dialog", [Dialog, _Templated], {
      // set any widget (Dialog construct) default parameters here
       toggle: 'standard',
        // render the dijit over a specific template
        // you should be aware, that once this templateString is overloaded,
        // then the one within Dialog is not rendered
      templateString: '<div bgColor="#FFFFFF" bgOpacity="0.4">' +// our domNode reference
                '<div class="dijitInline">' +
                    // setting a dojoAttachPoint makes it referencable from within widget by this attribute's value
                '  <input type="input" class="dateWidgetInput" dojoAttachPoint="numberOfDateNode" selected="true">' +
                '</div>' +
                '</div>',

        constructor: function(args, srcNodeRef) {
            args = args || {} // assert, we must mixin minimum an empty object
            lang.mixin(this, args);
        },
        postCreate: function() {

                    // with most overrides, preferred way is to call super functionality first
                    this.inherited(arguments);

            // here we can manipulate the contents of our widget, 
            // template parser _has run from this point forward
            var input = this.numberOfDateNode;
            // say we want to perform something on the numberOfDateNode, do so

        },
        // say we want to use dojo.Stateful pattern such that a call like
        //   myDialogInstance.set("dateValue", 1234)
        // will automatically set the input.value, do as follows
        _setDateValueAttr: function(val) {
            // NB: USING dojoAttachPoint REFERENCE
            this.numberOfDateNode.value = val;
        },
        // and in turn we must set up the getter
        _getDateValueAttr: function() {
            // NB: USING dojoAttachPoint REFERENCE
            return this.numberOfDateNode.value;
        }

  });

});

dojoAttachpoint和id之间的区别

2 个答案: