0

创建移动 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();
});
4

1 回答 1

1

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

添加这个：

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

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

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

于 2012-11-21T22:01:27.693 回答