How to pass data (selected item) to Durandal composed detail view?

Question

I\'ve started using (as of, a few hours ago) Durandal with the hope to manage views and allow composition within a single page - the previous approach, also using Knockout, was

Answer 1

I think that it's possible to pass any basis object as we do with modal call. ko.compose is passive; with durandal router, you can carry your data to where you like. Have a look to my work-around in this answer and help to perform.

Answer 2

There is a great writeup on how to do this with John Papa's SPA template for Visual Studio by Eric Panorel here: http://ericpanorel.net/blog/hot-towel-spa-master-detail-scenario.

In short, you can take advantage of routing in Durandal, and it would go something like this:

master.js will expose a set of items:

define(function() {
  var self = this;

  this.items = ko.observableArray([]);

  var activate = function() {
     // ... get your items
     self.items([ { id: 0, name: 'Item 1' }, { id: 1, name: 'Item 2' }]);
  }

  return {
    // some properties and ...
    activate: activate
  }
});

master.html will bind them and link to details view:

<section data-bind="foreach: items">
   <a data-bind="text: name, attr: { href: '#/item/' + id() }"></a>
</section>

Now, all that remains it to use route data parameter to pull the ID out in the detail viewmodel, detail.js:

define(function() {
  var self = this;

  this.name = ko.observable();

  var activate = function(routeData) {
     var itemId = routeData.id;

     // ... get your item details
     // var details = ...

     self.name(details.name);
  }

  return {
    // some properties and ...
    activate: activate
  }
});

Finally, you will need to specify the route in your main.js:

define(['durandal/app', 'durandal/viewLocator', 'durandal/system', 'durandal/plugins/router'],
function(app, viewLocator, system, router) {

    //>>excludeStart("build", true);
    system.debug(true);
    //>>excludeEnd("build");

    app.title = 'Durandal app';
    app.start().then(function() {
        toastr.options.positionClass = 'toast-bottom-right';
        toastr.options.backgroundpositionClass = 'toast-bottom-right';

        //Replace 'viewmodels' in the moduleId with 'views' to locate the view.
        //Look for partial views in a 'views' folder in the root.
        viewLocator.useConvention();

        //configure routing
        router.useConvention();
        router.mapRoute('item/:id', 'viewmodels/item', 'Item', false);

        app.adaptToDevice();

        //Show the app by setting the root view model for our application with a transition.
        app.setRoot('viewmodels/shell', 'entrance');
    });
});

And there you go!

Answer 3

If you look at the breeze source code, you can see an example of a master-detail approach.

They are using an activator to compose the child view.

https://github.com/IdeaBlade/Breeze/blob/master/Samples/TempHire/TempHire/App/viewmodels/resourcemgt.js

I don't know if you are using breeze or not, but the approach is independent of how do you get the data.