更改 Dojox.Mobile.Heading 的标签属性

Posted 2023-02-16

【中文标题】更改 Dojox.Mobile.Heading 的标签属性

【英文标题】：Changing Label Attribute of Dojox.Mobile.Heading

【发布时间】：2013-12-18 20:48:34

【问题描述】：

我有一个具有共同观点的 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>

【参考方案1】：

对于像标题这样的小部件，最好使用它的 get/set 来更改小部件的属性。

你应该使用：

 dijit.registry.byId("view_x_header").set("label", "View B");

小提琴::http://jsfiddle.net/theinnkeeper/Wgx8u/

【讨论】：

太棒了。谢谢，这解决了它。我之前尝试过 dijit.byId 没有成功。我猜我指的是以前的 dojo API？

是的 dijit.byId 是 1.7 之前的版本。他们将小部件查找移至其自己的名为 registry 的包中