如何在Dojo 1.9.x中使用TabContainers和Spring Roo？

Question

我試圖用Dojo 1.9.3更新我的Spring Roo項目

我已經使用dojo-1.9.3文件夾和代碼更新了我的web資源。

我已經更新了我的load-scripts.tagx來引用新版本而不是默認版本。

我甚至在pom.xml和load-scripts.tagx中刪除了spring-js的引用。

我的TabContainer沒有渲染。

我決定儘可能做最簡單的頁面。我從dojo網站複製了以下部分內容。

<div > 

    <script>dojoConfig = {parseOnLoad: true}</script> 

    <script> 
     require(["dojo/parser", "dijit/layout/TabContainer", "dijit/layout/ContentPane"]); 
</script> 
<div style="width: 350px; height: 300px"> 
<div data-dojo-type="dijit/layout/TabContainer" style="width: 100%; height: 100%;"> 
    <div data-dojo-type="dijit/layout/ContentPane" title="My first tab" data-dojo-props="selected:true"> 
     Lorem ipsum and all around... 
    </div> 
    <div data-dojo-type="dijit/layout/ContentPane" title="My second tab"> 
     Lorem ipsum and all around - second... 
    </div> 
    <div data-dojo-type="dijit/layout/ContentPane" title="My last tab" data-dojo-props="closable:true"> 
     Lorem ipsum and all around - last... 
    </div> 
</div> 

有誰知道這是爲什麼不渲染？

更新： 渲染的問題是我自己的錯。我有javascript干擾div的解析。我繼續並在下面標記我的答案是正確的，因爲這是解決此問題的一種方法。

Answer 1

如果我從陳述改爲程序，我可以得到這個工作。

下面我粘貼在jspx中我測試成功了。

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<div xmlns:c="http://java.sun.com/jsp/jstl/core" 
xmlns:fn="http://java.sun.com/jsp/jstl/functions" 
xmlns:jsp="http://java.sun.com/JSP/Page" 
xmlns:spring="http://www.springframework.org/tags" 
version="2.0"> 
<jsp:directive.page contentType="text/html;charset=UTF-8" /> 
<jsp:output omit-xml-declaration="yes" /> 

<script> 
require(["dijit/layout/TabContainer", "dijit/layout/ContentPane", "dojo/domReady!"], function(TabContainer, ContentPane){ 
var tc = new TabContainer({ 
    style: "height: 100%; width: 100%;" 
}, "myTabContainer"); 

var cp1 = new ContentPane({ 
    style:"height:125px", 
    title: "tab 1" 
    }, "editTab"); 
tc.addChild(cp1); 

var cp2 = new ContentPane({ 
    style:"height:125px", 
    title: "tab 2" 
    }, "editTab2"); 
tc.addChild(cp2); 

var cp3 = new ContentPane({ 
    style:"height:125px", 
    title: "tab 3" 
    }, "editTab3"); 
    tc.addChild(cp3); 

    tc.startup(); 
}); 
</script> 
<div style="width: 350px; height: 290px"> 
    Test 
    <div id="myTabContainer"> 
     <div id="editTab">tab 1</div> 


     <div id="editTab2">tab 2</div> 

     <div id="editTab3">tab 3</div> 
    </div> 
</div>