我有一个具有共同视图的dojox.mobile网站。我想重用多个“按钮”的视图,并调用一个函数,该函数根据按下的按钮改变视图标题的标签。但是,当我更改innerHTML时,后退按钮会消失。当我使用setattr函数时,标签不会改变。处理这个问题的正确方法是什么?
< /链路> - > 演示这个问题
<div id="MainMenu" data-dojo-type="dojox.mobile.View" data-dojo-props="selected: true" style="width: 100%; height: 100%;">
<h1 data-dojo-type="dojox.mobile.Heading">View A</h1>
<h2 dojoType="dojox.mobile.RoundRectCategory">Select a View</h2>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="rightText:'Go!', moveTo: 'generic_view_x', callback:SetupViewA">
View A
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="rightText:'Go!', moveTo: 'generic_view_x', callback:SetupViewB">
View B
</li>
</ul>
</div>
<div id="generic_view_x" data-dojo-type="dojox.mobile.View" style="width: 100%; height: 100%;">
<h1 id="view_x_header" data-dojo-type="dojox.mobile.Heading" data-dojo-props="back:'Main', moveTo:'MainMenu',label:'test'"></h1>
<div id="map_canvas" style="width: 100%; height: 100%;">
Some Other Stuff Here
</div>
</div>
<!-- configure and load dojo -->
<script src="./dojo/dojo.js" data-dojo-config="async:1, mblAlwaysHideAddressBar:true"></script>
<script>
require(["dojo"], function(dojo){
SetupViewA = function (){
// Doing it This way removes the back button
// document.getElementById('view_x_header').innerHTML = 'View A';
// This doesn't change anything
dojo.setAttr("view_x_header", 'label','View A')
}
SetupViewB = function (){
document.getElementById('view_x_header').innerHTML = 'View B';
}
})
require(["dojox/mobile/parser", "dojox/mobile", "dojox/mobile/deviceTheme", "dojox/mobile/compat", "dojo/domReady!"],
function(parser) {
parser.parse();
});
</script>
</body>
答案 0 :(得分:1)
使用小部件(如标题),最好使用其get / set来更改小部件的属性。
你应该使用:
dijit.registry.byId("view_x_header").set("label", "View B");