HotTowel Durandal Inject different views based on the user

Question

In the shell.html for HotTowel template we have:

    <!--ko compose: {model: router.activeItem, 
        afterCompose: router.afterCompose, 
        transition: 'entrance'} -->
    <!--/ko-->

which will automatically insert the proper view by convention. I am trying to inject different views based on the user's role in a HotTowel/Durandal App. For example, I have two Views,

1. productEditor_Admin.html
2. productEditor_Superviser.html (instead of these two views, I used to have only productEditor.html, by convention everything worked)

and only a single ViewModel:

1. productEditor.js

Now, I want to have a function in productEditor.js that will let me decide which view to insert based on user's role. I see in the Composition documentation, we can do function strategy(settings) : promise but I am not sure what's the best way to accomplish this in the HotTowel template. Anyone have already tried and got an answer for that?

Answer 1

It's possible to return a 'viewUrl' property in the view model, so hopefully something like the following will crack the door open ;-).

define(function () {
    viewUrl = function () {
        var role = 'role2'; //Hardcoded for demo

        var roleViewMap = {
            'default': 'samples/viewComposition/dFiddle/index.html',
            role1: 'samples/viewComposition/dFiddle/role1.html',
            role2: 'samples/viewComposition/dFiddle/role2.html'
        };

        return roleViewMap[role];

    }

    return {
        viewUrl: viewUrl(),
        propertyOne: 'This is a databound property from the root context.',
        propertyTwo: 'This property demonstrates that binding contexts flow through composed views.'
    };
});

Answer 2

Did you take a look at John Papa's JumpStart course on PluralSight.

Look at the source code from that app here: https://github.com/johnpapa/PluralsightSpaJumpStartFinal

In App/Config.js file he adds other routes which are visible by default as :

 var routes = [{
        url: 'sessions',
        moduleId: 'viewmodels/sessions',
        name: 'Sessions',
        visible: true,
        caption: 'Sessions',
        settings: { caption: '<i class="icon-book"></i> Sessions' }
        }, {
        url: 'speakers',
        moduleId: 'viewmodels/speakers',
        name: 'Speakers',
        caption: 'Speakers',
        visible: true,
        settings: { caption: '<i class="icon-user"></i> Speakers' }
        }, {
        url: 'sessiondetail/:id',
        moduleId: 'viewmodels/sessiondetail',
        name: 'Edit Session',
        caption: 'Edit Session',
        visible: false
    }, {
        url: 'sessionadd',
        moduleId: 'viewmodels/sessionadd',
        name: 'Add Session',
        visible: false,
        caption: 'Add Session',
        settings: { admin: true, caption: '<i class="icon-plus"></i> Add Session' }
    }];

You can add routes to both the views here using the same logic and then in your productEditor.js you can decide which view to navigate and navigate to that using router.navigateTo() method.