Добавление содержимого в dijit Dialog

Question

Я просмотрел довольно много ссылок для людей, пытающихся добавить контент/изменить шаблон для Dojo Dialog. This was the most promising.

Однако всякий раз, когда я делаю что-то вроде этого:

Диалог объявлен в HTML:

<div class="djDialog" id="dgViewer" data-dojo-type="TemplatedDialog" data-dojo-props="title: 'My Dialog', draggable:false"></div> 

Диалог Шаблон:

<div class="dijitDialog" role="dialog" aria-labelledby="${id}_title"> 
    <div data-dojo-attach-point="titleBar" class="dijitDialogTitleBar"> 
     <span data-dojo-attach-point="titleNode" class="dijitDialogTitle" id="${id}_title"></span> 
     <span data-dojo-attach-point="closeButtonNode" class="dijitDialogCloseIcon" data-dojo-attach-event="ondijitclick: onCancel" title="${buttonCancel}" role="button" tabIndex="-1"> 
      <span data-dojo-attach-point="closeText" class="closeText" title="${buttonCancel}">x</span> 
     </span> 
    </div> 
    <!-- containerNode from original Dialog template --> 
    <div data-dojo-attach-point="containerNode" class="dijitDialogPaneContent"> 
     <!-- All "custom" content --> 
     <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="height:300px"> 
      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"> 

      </div> 
      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'"> 
       <button data-dojo-type="dijit.form.Button">Edit</button> 
       <button data-dojo-type="dijit.form.Button">Status</button> 
      </div> 
     </div> 
     <!-- End "custom" content --> 
    </div> 
</div> 

Пользовательские Dialog класс:

define([ 
    'dojo/_base/declare', 
    'dijit/Dialog', 
    'dijit/_TemplatedMixin', 
    'dojo/text!./dialog_templates/View.html'], 
    function(
     declare, 
     Dialog, 
     _Mixin, 
     _template){ 
    return declare('TemplatedDialog', [Dialog, _Mixin], {  
     templateString : _template, 
     constructor : function(){ 

     } 
    }) 
}) 

В моей консоли (с помощью Chrome) Я вижу:

<div data-dojo-attach-point="containerNode" class="dijitDialogPaneContent" style="width: auto; height: auto; "></div> 

... и пустой узел, в котором содержание должно быть.

До сих пор я не нашел никого, кто, кажется, успешно расширил dijit.Dialog с точки зрения шаблонов. Это возможно?

Редактировать

Попробовав некоторые вариации этого шаблона:

<div class="dijitDialog" role="dialog" aria-labelledby="${id}_title"> 
    <div data-dojo-attach-point="titleBar" class="dijitDialogTitleBar"> 
     <span data-dojo-attach-point="titleNode" class="dijitDialogTitle" id="${id}_title"></span> 
     <span data-dojo-attach-point="closeButtonNode" class="dijitDialogCloseIcon" data-dojo-attach-event="ondijitclick: onCancel" title="${buttonCancel}" role="button" tabIndex="-1"> 
      <span data-dojo-attach-point="closeText" class="closeText" title="${buttonCancel}">x</span> 
     </span> 
    </div> 
    <!-- containerNode from original Dialog template --> 
    <div class="dijitDialogPaneContent"> 
     <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="height:100%;width:100%"> 
      <div data-dojo-attach-point="containerNode" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div> 
     </div> 
     <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'"> 
      <button data-dojo-type="dijit.form.Button">Edit</button> 
     </div> 
    </div> 
</div> 

Uncaught TypeError: Cannot read property '0' of undefined Ошибка выбрасывают. Это стек, если это помогает. Я использую несжатую версию из CDN Google, чтобы помочь в отладке.

_childElements   dojo.js.uncompressed.js:8341 
getStepQueryFunc  dojo.js.uncompressed.js:8597 
query     dojo.js.uncompressed.js:9005 
query     dojo.js.uncompressed.js:5248 
_2._checkIfSingleChild _ContentPaneResizeMixin.js:2 
_4._size    Dialog.js:2 
_4.show     Dialog.js:2 

Удаление data-dojo-type и -props из containerNode решает, но это все еще не получают вещи ближе к имея рабочий пользовательский шаблонного Dialog.

Answer 1

Причина проблем с выполнением шаблонизации на ContentPane в том, что любой шаблон-содержимое вы вкладываете в DOMNode ссылочного с точкой прикрепления-«containerNode», вы потеряете при запуске.

Если нет «HREF», ни «содержание» атрибуты набора, они будут просто установить в пустую строку, таким образом оставляя Dialog.containerNode.innerHTML == ""

У вас нет необходимости в выводе из _TemplatedMixin как сам диалог является шаблонный виджет. Вместо этого измените это на _WidgetsInTemplateMixin, чтобы компенсировать виджеты макета BorderContainer и содержимое dijit.form. Кроме того, разметка в пользовательском шаблоне должны быть предварительно необходимо, чтобы вы могли пойти с чем-то вроде этого здесь:

Изменить шаблон из старого attachpoint для контейнера этого

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

Затем добавить требования к вашему разметки виджетов в шаблоне плюс_WidgetsInTemplateMixin:

define(["dijit/Dialog", 
    "dijit/_WidgetsInTemplateMixin", 
    "dojo/text!./dialog_templates/View.html", 
    // rest are for rendering example 
    "dijit/layout/BorderContainer", 
    "dijit/layout/ContentPane", 
    "dijit/form/Button" 
}. ...); 

Результат должен ressemble это, сохраняя шаблон View.Изменение HTML в виду:

define([ 
    'dojo/_base/declare', 
    'dijit/Dialog', 
    "dijit/_WidgetsInTemplateMixin", 
    "dojo/text!./dialog_templates/View.html", 
     // rest are for rendering example 
    "dijit/layout/BorderContainer", 
    "dijit/layout/ContentPane", 
    "dijit/form/Button"], 
    function(
     declare, 
     Dialog, 
     _Mixin, 
     _template){ 
    return declare('TemplatedDialog', [Dialog, _Mixin /*careful, widgetsintemplate is tricky*/ ], {  
     templateString : _template 
    }) 
}) 

Вы можете fiddle here

EDIT:

Как есть проблемы с Диалоги, содержащие borderlayouts (его не неслыханное в любом случае) здесь обходной путь:

_checkIfSingleChild: function() { 
     delete this._singleChild; 
     domClass.toggle(this.containerNode, this.baseClass + "SingleChild", !!this._singleChild); 

    }, 
    templateString: '....' 

Я не уверен в последствиях, я думаю, что ваше пограничное поле может начать плохо себя вести, если вы попытаетесь программно изменить его содержимое и dimensio ns .. Но это проявится - по крайней мере, здесь: updated fiddle