Display a widget using Durandal modal dialog

Question

I recently started using the Durandal library for a SPA I am developing... kudos to the author, it is an excellent library.

I like the concept of widgets, vs using Views for stateless screens, but I was not able to display a widget in a modal dialog, without attaching it to a view. Does anyone know how to do this?

To elaborate, there is a widget.create function that allows for the creation of a widget in the JS but requires a DOM element to attach to. What I would prefer to do is create a widget, without attaching it to the DOM, then call something like:

app.showModal(theWidget);

As an alternative, I know I can create a "dialog" view that maps to swappable widgets, then use that view for dialogs, e.g. the view would have:

<div data-bind="widget: {kind:widgetId}">/div>

... and then:

app.showModal('viewmodels/dialog');

where 'viewmodels/dialog.js' is the view-model for the "Dialog" view.

References:

Brett Brett · Accepted Answer · 2013-08-22T23:46:49

Widgets are meant to be reusable controls on a web page, so that's why they require a DOM element. I'm not sure if I completely understand what you're trying to do, but you can define a view that returns its constructor function rather than a singleton object.

Here's a view that returns a singleton:

define([], function() {
  var singleton = {
    title: "I'm Mr. Singleton"
  };

  return singleton;
});

Here's the same view, but returns its constructor function:

define([], function() {
  var notSingleton = function () {
    this.title = "I'm NOT Mr. Singleton"
  };

  return notSingleton;
});

You can then use either of these within another viewmodel or module, as such:

define(['viewmodels/singleton', 'viewmodels/notSingleton'], 
function(singleton, NotSingleton) {
  ...
  app.showModal(singelton);
  app.showModal(new NotSingleton());
  ...
});

In the latter case, you could create multiple dialogs of the same viewmodel across multiple other views, but each would be its own instance with its own properties. If you wanted to share data and/or behaviors across all instances of that viewmodel type, you could add them to the viewmodel's prototype.

Hope this helps.

Display a widget using Durandal modal dialog

1 Answers