Question

我正在使用dojox / app构建一个Web应用程序，我的config.json文件如下所示：

{
    "id": "app",
    "name": "app",
    "description": "Example dojox/app based Worklight app",
    "dependencies": [
        "commonapp/app",
        "commonapp/BaseViewController",
        "dojo/store/Memory",
        "dojox/app/utils/mvcModel",
        "dojox/mvc/EditStoreRefListController",
        "dojo/store/Observable",
        "dojox/mobile/Button"
    ],
    "controllers": [
    "dojox/app/controllers/Load",
    "dojox/app/controllers/Transition",
    "dojox/app/controllers/Layout",
    "dojox/app/controllers/HistoryHash"],

    "stores": {

    },
    "models": {

    },

    "defaultView": "MainTemplate",
    "defaultTransition": "slide",
    "views": {
        "MainTemplate": {
            "template": "commonapp/templates/MainTemplate.html",
            "controller": "commonapp/templates/MainTemplate.js",
            "nls": "commonapp/templates/nls/MainTemplate",
            "defaultView": "SampleView+HiddenMenu",
            "views": {
                "SampleView": {
                    "template": "commonapp/sample/SampleView.html",
                    "controller": "commonapp/sample/SampleView.js",
                    "nls": "commonapp/sample/nls/SampleView",
                    "constraint" : "center",
                },
                "HiddenMenu": {
                    "template": "commonapp/MenuItems/HiddenMenu.html",
                    "controller": "commonapp/MenuItems/HiddenMenu.js",
                    "nls": "commonapp/MenuItems/nls/HiddenMenu",
                    "constraint" : "bottom"
                },
                "ExpandedMenu": {
                    "template": "commonapp/MenuItems/ExpandedMenu.html",
                    "controller": "commonapp/MenuItems/ExpandedMenu.js",
                    "nls": "commonapp/MenuItems/nls/ExpandedMenu",
                    "constraint": "bottom"
                }
            }
        }
    }
}

HiddenMenu和ExtendedMenu视图仅包含一个按钮，用于在每个视图之间切换。例如，HiddenMenu.html看起来像：

<div class="mblView">
<script type="dojo/require">at: "dojox/mvc/at"</script>
<div style="text-align: right">
        <button data-dojo-type="dojox.mobile.Button" data-dojo-attach-point="dapMenuButton">Label</button>
</div>
</div>

和HiddenMenu.js控制器在init方法上有以下代码：

on(this.view.dapMenuButton, "click", lang.hitch(this, function(e) {
    var transOpts = {
        target : "MainTemplate,ExpandedMenu",
        url : "#MainTemplate,ExpandedMenu" // this is optional if not set it will be created from target
    };
    this.view.app.transitionToView(e.target,transOpts,e);
}));

另一个有类似的代码。该应用程序加载正确，但我在这两个视图之间切换时有一个奇怪的行为。即使切换正确发生，两个视图也不会显示在与预期相同的空间中，这将位于页面的底部。其中一个在另一个上面显示。我的目的是第二个按钮（＆＃34;隐藏标签＆＃34;）占据第一个按钮留下的空间（＆＃34;标签＆＃34;）。有谁知道如何实现这个目标？

谢谢

Answer 1

我不确定，因为我没有像这样设置应用程序，但认为问题在于您使用的是嵌套视图和多个默认子项。

是MainTemplate，SampleView在转换后仍然可见吗？您可能希望尝试使用以下过渡：

目标：＆＃34; MainTemplate，SampleView + MainTemplate，ExpandedMenu＆＃34;，

将HiddenMenu和ExpandedMenu置于具有＆＃34;约束＆＃34;：＆＃34; bottom＆＃34;的单个父项下是否有意义，而不在同一父视图下使用SampleView？这也许有帮助。

如果您继续遇到问题，请告诉我们，我们可以尝试找出一种帮助调试它的方法。

此致编

Dojox / app：如何正确切换视图？

1 个答案: