Perform transition in DOJO Application

Question

I've set up simple dojox/app mobile app with two views, listing and details:

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

the controller is correctly showing up the list in the ListItems, and I've setup a click handler to make the transition to the details:

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

but it doesn't work. In fact, I see that the list turns blue for about 300ms but then stays on the same view, no console warning or errors. Just nothing.

Also tried to do it declarative in the html without success:

<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>

Any help? Thank you

Answer 1

Documentation is a little confusion, at least for dojo 1.9

Found several solutions for this:

Either use the target property (not the moveTo) so the span above would be

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

or in code

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

explicit by you with the use of the dojox/app transitionToView function

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

or through the TransitionEvent module, this seems to be the right way

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