Event methods

Event methods are automatically called by the Visto JavaScript 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 on view or dialog classes.

All view and view model classes:
  • initialize
    • This method is called after the view and view model object has been constructed and both classes have been fully loaded
    • 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 knockout objects (e.g. self.test = ko.observable())
      • Don't do web service calls, do them in the loaded() method (as they might complete before the view has loaded which causes knockout problems)
    • the initialize() method from the view is called before the view model's initialize() method
  • loaded
    • Called after the view model has been applied to the HTML element and the element is visible in the GUI
    • 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

View classes which are used as pages (instantiated using the navigateTo() method):
  • onNavigatedTo(type)
    • This method is called after navigating to the page (after calling initialize() and loaded() methods)
    • The parameter type = "back" | "forward", specifies the navigation direction
  • onNavigatingFrom(type, completed)
    • This method is called before navigating from the page. Using the completed callback it is possible to asynchronously cancel the navigation from the page.
    • The completed callback MUST always be called with either true (navigate) or false (cancel navigation) as parameter
    • Using this completed callback it is possible to do asynchronous operations in the onNavigatingFrom method
    • Sample implementation:
// asynchronous processing
SamplePage.prototype.onNavigatingFrom = function(type, completed) {
	var self = this; 
	if (type == "back") {
		mt.confirm("Navigate back?", "", "YesNo", function(result) {
			completed(result === "yes");

// default implementation
SamplePage.prototype.onNavigatingFrom = function(type, completed) {
  • onNavigatedFrom
    • This method is called after navigating from the page

Dialog view and view model classes:
  • initializeDialog(options: DialogOptions)
    • This method is called to allow the view to change dialog options.
    • The method is called after the view has been created and before the dialog is shown.

Last edited Dec 20, 2013 at 8:49 AM by rsuter, version 31


No comments yet.