在DOJO应用程序中执行转换

Question

我已经设置了简单的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"
    }
}

控制器在listtitems中正确显示列表，并且我已经设置了一个click处理程序来过渡到细节:

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>

帮忙吗?谢谢你

Answer 1

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

找到了几个解决方案:

使用目标属性(而不是moveTo)，因此上面的span将是

<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();
    });
}