View

Base classes: View<TViewModel>, ViewBase, Page<TViewModel>, PageBase, Dialog<TViewModel>, DialogBase

The view "code-behind" class is used for code which directly interacts with the HTML DOM. In contrast to the view model, the view "code-behind" class should contain the methods which are highly coupled to the HTML DOM. Use this class to directly interact with HTML elements, for example to instantiate JQuery widgets, update element sizes, etc.

The view class

Each view class must extend the VistoViewBase base class:

import visto = require("libs/visto");

export MyView extends visto.VistoViewBase {
    ...
}

If you need access to the view's view model, you can extend VistoView and specify the view model type:

import visto = require("libs/visto");
import vm = require("../viewModels/MyViewModel");

export MyView extends visto.VistoView<vm.MyViewModel> {
    initialize() {
        var vm = this.viewModel;
    }
}

Methods of the base class

• Event methods
• findElements(selector: string): JQuery
• getViewElement(id: string): JQuery

Properties of the base class

• viewId
  • ID of the view which is used as prefix
• parameters
  • Used to access the view's parameters (see view parameters)
• viewModel (only available when extending VistoView with a view model type)
  • Reference to the associated view model
• dialog
  • JQuery object with DOM element

Instantiate views

In HTML

A view can be created using custom tags:

<vs-sample-view param1="1" param2="test" />

To load a view from another package, specify the package with the package attribute:

<vs-other-sample-view package="otherSamplePackage" />

In code

To create a view programmatically, you can use the createView method. The view is created "into" the HTML element:

var element = this.getViewElement("myDiv");
visto.createView(element, "SampleView", { param1: 1, param2: 'test' });

Usually you don't need to call this method programmatically, because the framework handles view instantiation automatically.

Important: The code above always looks up the view in the default package because the createView() method does not know the current package.