title: Durandal Widget with multiple views
body: <p>I am working on a SPA using Durandal, and I have created a widget for displaying a particular page component.  Following the <a href="http://durandaljs.com/documentation/Creating-A-Widget/" rel="nofollow">Durandal Documentation</a>, the widget is in <code>app/widgets/my-widget</code> and is composed of <code>viewmodel.js</code> and <code>view.html</code>.</p>
  
  <p>Now, I want to add a different view to the same widget - in effect, to have a "Basic" view and an "Advanced" view, with a flag in the ViewModel for which one will be used.</p>
  
  <p>I do not want to create two different widgets, because the ViewModel is exactly the same and I want to avoid unnecessary code duplication.  I also do not want to put both versions of the view into <code>view.html</code> and just display one or the other based on the flag in the ViewModel, because that will quickly become a nightmare to maintain as features are added to the widget later on.</p>
  
  <p>I would think that one answer is to do some kind of <a href="http://durandaljs.com/documentation/Using-Composition/" rel="nofollow">View Composition</a>, where the name of the view to be composed is returned from the ViewModel based on the flag, but I'm not really sure how to do that.</p>
  
  <p>Does anyone have a way to do this?  Is there a different way I should be approaching this problem?</p>
  
  <hr>
  
  <p><strong>UPDATE</strong> Here is an example of what I want to do.  There is a widget <code>workitem</code> that is used to display "Work Items".  In the ViewModel, a Work Item has a property <code>status</code> which can take the values <code>ready</code>, <code>in-progress</code>, <code>complete</code>, or <code>invalid</code>.  Depending on the status of a Work Item, the information that needs to be displayed about it (and therefore its View) is completely different.  What I want to do is set up something like this:</p>
  
  <pre><code>-widgets
  |
  |-workitem
  |  |-viewmodel.js
  |  |-view-ready.html
  |  |-view-in-progress.html
  |  |-view-complete.html
  |  |-view-invalid.html
  </code></pre>
  
  <p>... and then automatically select one of these views based on the property in the ViewModel.</p>