0

我正在使用 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);
}));

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

谢谢

4

1 回答 1

0

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

MainTemplate,SampleView 在过渡后是否仍然可见？您可能想尝试过渡：

目标 : "MainTemplate,SampleView+MainTemplate,ExpandedMenu",

将 HiddenMenu 和 ExpandedMenu 放在具有“约束”：“底部”的单个父级下，而不在同一父级视图下也有 SampleView 是否有意义？这也可能有帮助。

如果您仍然有问题，请告诉我，我们可以尝试找出一种方法让我帮助调试它。

问候， 埃德

于 2014-07-23T18:02:37.180 回答