Databases
StackOverflow2013
Postsdbo
PODurandal Widget with multiple views
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODurandal Widget with multiple views
    primarykey
    data
    text
    <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>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMoshe Katz
    1. USMoshe Katz
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PODurandal Widget with multiple views
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PODurandal Widget with multiple views
      1. This table or related slice is empty.
      1. VTUpMod
    1. COWhy a widget and not just a normal view? There seems to be methods for doing this with views, I'm not sure they apply to widgets though.
      singulars
      1. PODurandal Widget with multiple views
      1. USCodingGorilla
    2. CO@CodingGorilla It is a widget for two reasons: 1. It has state independent of the page itself, and therefore has its own ViewModel. 2. There may be more than one on the page, each *with its own independent state*.
      singulars
      1. PODurandal Widget with multiple views
      1. USMoshe Katz
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload