Durandal: Switch views without reloading model - durandal

Question

I am using duraldal v2, and on one of the pages I want to switch views without re-activating the model.
To achieve this I leverage approach from v1 using compose binding with view connected to observable, changed by inline click binding in my navigation links:
<ul class="nav nav-tabs">
<li data-bind="css: {active:activeView() == 'view1'}">View 1</li>
<li data-bind="css: {active:activeView() == 'view2'}">View 2</li>
. . .
</ul>
<div data-bind="compose: {view: activeView, activate: true, area: 'settings', transition: 'entrance', cacheViews: true}"></div>
VM:
define(['knockout'], function (ko) {
return {
activeView: ko.observable()
,setView: function(view) {
this.activeView(view);
}
,activate: function (args) {
var self = this;
return system.defer(function(dfd) {
self.setView('view1');
dfd.resolve(true);
}).promise();
}
. . .
I believe this is an awkward way, and in v2 there should be a more elegant way to do this. As far as understand, I cannot use child router, like in ko samples, because it reloads model every time.
Any ideas?

Answer 1

Looks fine to me.
Is it the inline functions you dislike? You could just do:
<ul class="nav nav-tabs">
<li data-bind="css: {active:activeView() == 'view1'}">View 1</li>
<li data-bind="css: {active:activeView() == 'view2'}">View 2</li>
. . .
</ul>
and:
return {
activeView: ko.observable()
,setView1: function() { this.activeView('view1') },
,setView2: function() { this.activeView('view2') },
...
If this functionality is really common for you, you might consider turning it into a widget which could potentially box up a pattern like this.