Durandal. Pass additional data to other view

Question

I've got a view that needs to be populated conditionally.

Scenario: A manager will select a users name on screen B, then will be navigated to the same form the user filled in EG. screen A, except that the said manager will have the option to approve or deny the request of the user.

I've seen that in my VM on screen A I can do the following.

var vm = {
           activate: function (data) {
           console.log(data);

            var id = data.id || -1;

            if (id !== -1) {
                router.isNavigating(true);
                http.json('/api/user/'+ id )
                  .done(function (response) {
                      ko.viewmodel.updateFromModel(vm.userInfo, response);
                      router.isNavigating(false);
                  });
            }
          }
    };

And then B (view & view model)

view

 <table>
     <thead>
          <tr>
            <td>User</td>
            <td>Date Requested</td>
            <td>Action</td>
          </tr>
          </thead>
          <tbody>
           <tr>
             <td>Mike</td>
             <td>19 Jun 2013
             </td>
             <td>
                <input type="button" value="Go" data-bind="click: function() { buttons.goTo(6) }" />
              </td>
           </tr>
      </tbody>
 </table>

viewmodel

define(['durandal/plugins/router'], function (router) {
    var buttons = {
        goTo: function (id) {
            console.log('goTo clicked');

            //this does work in conjunction with my code on B
            router.navigateTo('#/userinfo?id=' + id);    
        }
    };

    var vm = {
        buttons: buttons
    };

    return vm;
});

My issue is that I'm not sure what the best way/or how to for that matter to get Durandal to navigate to page A from B... Is what I'm doing right? As it feels a little bit "hacky"

Answer 1

The navigation, at least to me, is designed to mimic standard MVC web navigation. In this case, since you already know that you want to go to 6, why not use an anchor like so

<a href="#/userinfo?id=6"/>

A better way would be to register your route with an id splat like so your route would become

routes.map({route: 'userinfo/:id, ...
<a href="#/userinfo/6" />

This way you can access the splat on the activate method..there are several examples out there but I don't have links to them. Basically the activate method of your userinfo viewmodel will accept a parameter and from there you can load an entity or whatever you like. Hope this helps.

Brad