dijit에 내용 추가하기 대화 상자

Question

나는 Dojo 대화 상자의 내용을 추가/변경하기 위해 많은 링크를 보았다. 나는 이런 식으로 뭔가를 할 때마다 This was the most promising.

그러나 :

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

사용자 정의 대화 상자 클래스 :

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(){ 

     } 
    }) 
}) 

대화는 HTML에 선언

<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가 발생되고있다. 도움이된다면 이것은 스택입니다. 디버깅을 돕기 위해 Google CDN의 압축되지 않은 버전을 사용하고 있습니다. containerNode에서 및 -props 제거

_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 

는이 문제를 해결합니다,하지만 여전히 작동하는 사용자 정의 템플릿 대화를 가진 가까이 가지 못하고 있어요.

Answer 1

contentpane에서 템플리트를 작성하는 데 문제가있는 이유는 첨부 파일 'containerNode'으로 참조되는 domNode에 넣은 템플릿 내용이 무엇이든 시작할 때 느슨해지기 때문입니다.

에는 'href가'도 '내용'이없는 경우는 설정, 그들은 단순히 대화 자체가 그대로 당신은 _TemplatedMixin에서 파생에 대한 필요가 없습니다, 따라서 Dialog.containerNode.innerHTML == ""

를 떠나, 빈 문자열로 설정됩니다 속성 템플릿 위젯. 대신 BorderContainer 레이아웃 위젯과 dijit.form 내용을 보완하려면이 값을 _WidgetsInTemplateMixin으로 변경하십시오. 여기에이 같은 갈 수 있도록 또한, 사용자 정의 템플릿 내에서 마크 업이 사전에 요구해야합니다

변경 다음에 요구 사항을 추가하려면이

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

에 컨테이너 된 attachpoint에서 템플릿 당신의 템플릿 플러스_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한다.마음에 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

편집 :에 문제가있는 것처럼

borderlayouts (어쨌든 그것의 전례가되지 않음)를 포함하는 대화 상자가 여기에 해결 방법입니다 :

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

    }, 
    templateString: '....' 

가

메신저 결과가 확실하지 않습니다. 여러분의 프로그래밍 방식으로 내용을 변경하려고 시도한다면 여러분의 경계가 잘못 될 수도 있습니다. d 차원. 그러나 렌더링 할 것입니다. 적어도 여기에 있습니다 : updated fiddle