0

モバイル Dojo アプリケーションを作成すると、次の問題が発生しました。ここや他の場所で検索しましたが、他に問題を抱えている人はいません。私は Dojo を初めて使用するので、何か間違ったことをしているのかもしれません。

プログラムの動作は次のとおりです 。最初のパネル (div "one") で、"+" ボタンをクリックします。div "two" はスキップされ、div "three" がビューに移行されます。[キャンセル] をクリックすると、div "two" が再びスキップされ、div "one" がビューに戻ります。これですべてです。

ここに問題があります: div "one" が遷移してビューに戻ると、ブラウザーのスクロールバーが表示され、一番下までスクロールしても div "three" が表示されたままになります。これは一度だけ発生します。「+」をもう一度クリックしてから、もう一度「キャンセル」をクリックすると、div「three」が非表示になり、スクロールバーが表示されなくなります。HTML で div の「2」と「3」を入れ替えると、不具合が発生しなくなりました。残念ながら、アプリは任意の順序で移行する必要があるため、それは私の解決策ではありません。

Chrome の開発ツールで HTML 要素を見ると、div の "three" の "visibility" プロパティが、2 回目の "Cancel" をクリックするまで "hidden" に戻らないことがわかります。

私の推測では、プログラムでビューを作成する方法と関係があると思います。これに関する助けをいただければ幸いです。

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 に答える