Event Methods

Event methods are automatically called by the framework when a particular event happens on a view. Some event methods can be implemented on the view and view models, others are only available when the view is used as page or dialog.

Event methods for View<TViewModel>, ViewBase and ViewModel extending classes:

A view is instantiated using HTML tags or using the createView() method.

• initialize()
  • Called after the view and view model object have been constructed and both objects have been fully loaded. The initialize() method of the view "code-behind" class is called before the view model's initialize() method.
  • Use this method instead of the constructor for class initialization because in the constructor, the member variables like parameters are not available.
  • The method is called before applying the view model to the HTML element.
  • Use this method only to initialize variables with KnockoutJS observables. Do not call web services, as they might complete before the view has loaded which causes knockout problems. Make the web service calls in the onLoaded() method.
• onLoading(): Promise
  • Called after the view has been initialized and before the view is added to the HTML DOM. Using this event method, it is possible to asynchronously perform work before the view (and its parent view) is visible.
  • The method must return a promise and the view is not shown before the promise has completed.
• onLoaded()
  • Called after the view model has been applied to the HTML element and the element is visible in the DOM.
  • The loaded() method from the view is called before the view model's loaded() method.
• destroy()
  • Used to clean up stuff created in initialize or loaded (e.g. jQuery UI widgets)
  • (must be called manually if view programmatically created with createView method not from binding)
  • Also see Avoiding memory leaks
  • the destroy() method from the view model is called before the view's destroy() method

Event methods Page<TViewModel> and PageBase extending classes:

A page is instantiated using the navigateTo() method.

• onNavigatedTo(type)

  • Called after navigating to the page (after calling initialize() and loaded() methods)
  • The parameter type = "back" | "forward", specifies the navigation direction

• onNavigatingFrom(type): Promise

  • Called before navigating from the page.

  • The method allows to asynchronously cancel the navigation from the page if needed.

  • The method must return a promise with a value which is either true (navigate) or false (cancel navigation).

  • Sample implementation:

      import visto = require("libs/visto");            
      import common = require("common/main");            
      
      export class MyView extends visto.VistoViewBase {
          onNavigatingFrom(type) {
              return Q.Promise((resolve, reject) => {
                  if (type === "back") {
                      common.confirm(
                          "Navigate"
                          "Do you want to navigate back?", "", 
                          common.ConfirmButtons.YesNo, 
                          (result) => {
                              resolve(result === visto.DialogResult.Yes);
                          }
                      );
                  }
                  else
                      resolve(true);
              }); 
          };
      }
    

• onNavigatedFrom

  • Called after navigating away from the page.

Event methods Dialog<TViewModel> and DialogBase extending classes:

A dialog is instantiated using the showDialog() method.

• onShown()
  • Called after the dialog is fully visible to the user (after all animations, etc.).
• onClosed()
  • Called after the dialog has been closed.