To create a dialog from a view simply call the dialog method on the Visto object:

require(["libs/visto", function(visto) {
	// show the dialog "SampleView" from the default package ("app")

  • visto.dialog(viewName, parameters, dialogOptions, closed, loaded)
    • To use this method, the dialog method must be defined on the JQuery object. For example, the JQuery UI library provides this implementation.
    • The viewName and parameters are directly passed to the visto.view method
    • The dialogOptions parameter is directly passed to the JQuery dialog method

It is possible to implement the event method initializeDialog(options) on the view or view model to modify these options in the view's code. This way the dialog can be better encapsulated (e.g. the buttons are created in the view, not from the caller).

initializeDialog(options: JQueryUI.DialogOptions) {

Usage with TypeScript generics

If the dialog method is called with a generic parameter, the view parameter of the closed and loaded callbacks is "fully" typed (otherwise the parameter is typed as IVistoDialog interface who does not expose custom members and a typed view model).

If there is a view "code-behind" class for the dialog, simply call the dialog method with this class:

import ns = module("app/views/dialogs/SampleDialog");
visto.dialog<ns.SampleDialog>("dialogs/SampleDialog", null, null, null, view => {
	// view is of type SampleDialog
If there is no dialog "code-behind" use the VistoDialog class and the view model class as its generic parameter:

import ns = module("app/viewModels/dialogs/SampleDialogModel");
visto.dialog<VistoDialog<ns.SampleDialogModel>>("dialogs/SampleDialogModel", ...);

Last edited Aug 7, 2013 at 2:13 PM by rsuter, version 19


No comments yet.