在 DOJO 应用程序中执行转换答案

【问题标题】：Perform transition in DOJO Application在 DOJO 应用程序中执行转换
【发布时间】：2014-05-04 23:11:26
【问题描述】：

我已经设置了简单的 dojox/app 移动应用，其中包含两个视图、列表和详细信息：

"defaultView": "list",
"views": {
    "list": {
        "controller": "comp/controller/list",
        "template": "comp/view/list.html"
    },
    "details" : {
        "controller": "comp/controller/details",
        "template": "comp/view/details.html"
    }
}

控制器在 ListItems 中正确显示列表，并且我已经设置了一个点击处理程序来转换到详细信息：

t.onClick = lang.hitch(t, function () {
    this.transitionTo("details", 1, "slide", null);
});

但它不起作用。事实上，我看到列表变成蓝色大约 300 毫秒，但随后保持在同一个视图上，没有控制台警告或错误。什么都没有。

还尝试在 html 中以声明方式进行但未成功：

<div id="data" data-dojo-type="dojox/mobile/ScrollableView" data-dojo-props="selected: true">
    <div id="dataHeading" data-dojo-type="dojox/mobile/Heading" data-dojo-props="fixed: 'top', label: 'All'">
        <span data-dojo-type="dojox/mobile/ToolBarButton"
              data-dojo-props="icon: 'img/settings.png'"
              style="float:left;"></span>
        <span id="refreshButton" 
              data-dojo-type="dojox/mobile/ToolBarButton" 
              data-dojo-props="icon: 'img/refresh.png', moveTo: 'details'" 
              style="float:right;"></span>
    </div>
    <div id="datasList" data-dojo-type="dojox/mobile/EdgeToEdgeList">
    </div>
</div>

有什么帮助吗？谢谢

【问题讨论】：

标签： javascript html dojo

【解决方案1】：

文档有点混乱，至少对于 dojo 1.9

为此找到了几种解决方案：

要么使用目标属性（而不是 moveTo），所以上面的跨度将是

<span id="refreshButton" 
          data-dojo-type="dojox/mobile/ToolBarButton" 
          data-dojo-props="icon: 'img/refresh.png', target: 'details'" 
          style="float:right;"></span>

或在代码中

var t = new ListItem(data);
t.target = "details";

由您使用 dojox/app transitionToView 函数明确说明

beforeActivate: function (previousView, data) {
    (...)
    var t = new ListItem(data);
    //t.target = ""; this will be handle in the onClick event
    t.clickable = true;
    t.placeAt(this.list, "last");
    t.onClick = lang.hitch(this, function () {
        this.app.transitionToView(this.domNode, {
            target: "details" });
    });
}

或者通过TransitionEvent模块，这似乎是正确的方式

beforeActivate: function (previousView, data) {
    (...)
    var t = new ListItem(data);
    //t.target = ""; this will be handle in the onClick event
    t.clickable = true;
    t.placeAt(this.list, "last");
    t.onClick = lang.hitch(this, function () {
        new TransitionEvent(this.domNode, {
            target: "details",
            transition: "slide",
            transitionDir: 1
        }).dispatch();
    });
}

【讨论】：