在 Dojo.mobile 中跳过 ScrollableView 时视图不隐藏答案

【问题标题】：View doesn't hide when skipping ScrollableView in Dojo.mobile在 Dojo.mobile 中跳过 ScrollableView 时视图不隐藏
【发布时间】：2012-11-21 17:52:44
【问题描述】：

创建移动 Dojo 应用程序并遇到以下问题。我在这里和其他地方搜索过，没有看到其他人有这个问题。我是 Dojo 的新手，所以可能只是我做错了什么。

以下是程序化行为：在第一个面板（div“one”）中，单击“+”按钮； div "two" 被跳过，div "three" 被转换到视图中；单击“取消”，再次跳过 div “two”，div “one” 转换回视图。一切都应该如此。

问题出在：当 div“one”转回视图时，会出现一个浏览器滚动条，并且当您滚动到底部时 div“three”仍然可见。这只会发生一次。再次单击“+”，然后再次单击“取消”，div“three”被隐藏，并且没有出现滚动条。在 HTML 中，如果将 div 切换为“二”和“三”，则不会发生不当行为。不幸的是，这不是我的解决方案，因为应用程序需要以任何给定的顺序进行转换。

在 Chrome 的开发工具中，如果您查看 HTML 元素，您会注意到 div“three”的“visibility”属性不会返回到“hidden”，直到您第二次单击“Cancel”。

我的猜测是它与我以编程方式创建视图的方式有关。对此的任何帮助将不胜感激。

HTML (test.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js" data-dojo-config="async: true"></script>
    <script type="text/javascript" src="script/test.js"></script>
</head>
<body>
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
</body>
</html>

JavaScript (test.js)

require([
'dojo/ready',                       'dijit/registry',               'dojox/mobile/parser',
'dojox/mobile/deviceTheme',         'dojox/mobile/compat',          'dojox/mobile/Icon',
'dojox/mobile/ScrollableView',      'dojox/mobile/Heading',         'dojox/mobile/ListItem',
'dojox/mobile/EdgeToEdgeList',      'dojox/mobile/ToolBarButton',   'dojox/mobile'
],
function(ready, registry, parser, deviceTheme, compat, Icon, ScrollableView, Heading, ListItem, EdgeToEdgeList, ToolBarButton, mobile){
ready(function(){
    var view_activity_edit = new ScrollableView(null, 'three');
    var view_activity_view = new ScrollableView(null, 'two');

    var view_activities = new ScrollableView(null, 'one');
        view_activities.selected = true;

        var heading = new Heading({
            label: 'Activities'
        });
        view_activities.addChild(heading);

            var button = new ToolBarButton({
                icon: 'mblDomButtonWhitePlus',
                style: 'float:right;',
                moveTo: 'three',
                onClick: function(e){
                    click_activity_edit(e,0);
                }
            });
            heading.addChild(button);


        var list_activity = new EdgeToEdgeList({
            id: 'activity-list'
        });
        view_activities.addChild(list_activity);

        view_activities.startup();
});

this.click_activity_edit = function(e, activityid) {
    var view_activity_edit = registry.byId('three');
        view_activity_edit.destroyDescendants(false);

        var heading = new Heading({
            label: 'Activity'
        });
        view_activity_edit.addChild(heading);

            var button = new ToolBarButton({
                label: 'Cancel',
                moveTo: 'one',
                transitionDir: -1,
                arrow: 'left'
            });
            heading.addChild(button);

    view_activity_edit.startup();
};

parser.parse();
});

【问题讨论】：

标签： dojo dojox.mobile

【解决方案1】：

这与视图的呈现方式有关。如果在将额外的工具栏按钮添加到 3rd-view 之后，在 2nd-view 上调用 startup()。

添加这个：

registry.byId('two').startup();

到您的 click_activity_edit() 函数的末尾，它会起作用。请参阅the jsFiddle，我已为您的代码创建。

我想解释为什么会这样，但我不能 100% 确定。一旦我有时间仔细考虑，我可能会添加一个解释；或者对滚动视图的内部工作有更透彻理解的人会给出详细的答案。

【讨论】：

完美运行。谢谢，斯蒂芬，花时间解决这个问题。我想得越多，它就越有意义。 div "two" 没有被框架渲染，所以它真的不知道如何处理未渲染的元素。再次感谢。