2010-12-29 4 views
1

특정 HTML 태그의 Dojo 컨텐츠 분할 창에 컨텐츠를로드하려고하는데 전체 컨텐츠 분할 창을 대체하려고하지 않습니다. 내가로드하는 html에는 새 행이로드 될 때 렌더링하고 싶은 마크 업 정의 위젯이 포함되어 있습니다.Dojo 및 Ajax 렌더링 위젯

<body> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" 
    djConfig="parseOnLoad: true, isDebug:true"></script> 
    <div id="table-pane" dojoType="dijit.layout.ContentPane"> 
    <table class="test"> 
     <tbody> 
     <tr><td>Name</td><td>Year</td><td>Age</td></tr> 
     <tr> 
      <td><span dojoType="dijit.InlineEditBox" editor="dijit.form.Textarea">Mike</span> 
      </td> 
      <td>2010</td> 
      <td>12</td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 
</body> 

<script> 
var html ='<tr><td><span dojoType="dijit.InlineEditBox" editor="dijit.form.Textarea">John</span></td><td>2011</td><td>22</td></tr>'; 
dojo.require("dijit.layout.ContentPane"); 
dojo.require("dijit.InlineEditBox"); 
dojo.require("dijit.form.Textarea"); 
dojo.addOnLoad(function(){ 
    pane = dijit.byId("table-pane"); 
    add_elem(); 
}); 
function add_elem(){ 
    var node = $(".test tr:last"); 
    node.after(html); 
    dojo.addOnLoad(function(){ 
    //Here I want to initiate any widgets that haven't been initiated 
    pane.buildRendering(); 
    }); 
}</script> 

가 어떻게 새 테이블 행의 Dojo 위젯을 렌더링 할 :

는 그래서, 즉 동적으로 아약스를 통해 작성되는 테이블을 가지고?

답변

3

ContentPane은 setContent을 사용하여 컨텐츠 세트의 위젯을 렌더링합니다. 앞서 언급했듯이 dojoType 노드를 추가 한 후에 dojo 파서를 특정 DOM 노드로 지정할 수도있다. 그러나 코드에서 모든 작업을 수행하는 경우 선언적 방식 대신 프로그래밍 방식을 사용하는 것이 좋습니다. 어쨌든 도장을 사용하는 경우이되고 귀하의 예제를 사용

,

<html> 
    <body> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" 
     djConfig="parseOnLoad: true, isDebug:true"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 

    <div id="table-pane" dojoType="dijit.layout.ContentPane"> 
     <table class="test"> 
     <tbody> 
      <tr><td>Name</td><td>Year</td><td>Age</td></tr> 
      <tr> 
      <td><span dojoType="dijit.InlineEditBox" editor="dijit.form.Textarea">Mike</span> 
      </td> 
      <td>2010</td> 
      <td>12</td> 
      </tr> 
     </tbody> 
     </table> 
    </div> 

<script> 
var html ='<tr><td><span id="target">John</span></td><td>2011</td><td>22</td></tr>'; 
dojo.require("dijit.layout.ContentPane"); 
dojo.require("dijit.InlineEditBox"); 
dojo.require("dijit.form.Textarea"); 
dojo.addOnLoad(function(){ 
    var node = $(".test tr:last"); 
    node.after(html); 
    new dijit.InlineEditBox({ 
     editor: "dijit.form.Textarea", 
     autoSave: true 
     }, dojo.byId('target')); 
}); 
</script> 

    </body> 
</html> 

, 당신은 또한 당신이 찾아 노드를 조작하는 대신에 jQuery를의 dojo.query 수 있습니다. 예,

dojo.query(".test tr:last-child"); 
+0

dojo.parser.parse() 사용에 문제가 있습니다. 함수를 여러 번 호출했을 때 이미 페이지에서 사용 된 위젯 ID를 사용하여 새 textAreas를 인스턴스화하려고했습니다. –

+0

내 문제는 선택기가 이미 렌더링을 위해 렌더링 된 위젯을 잘못 선택한 것과 같습니다. –

0

이 도움이 될 것입니다 dojo.parser.parse(domnode?)

하지만 난 dijit.layout.contentpane 같은 특정 위젯이로드 된 DOM-조각을 자동 분석 생각합니다. 포함 된 위젯은 전에 dojo.required가되어야합니다!