Rico Suter edited this page May 27, 2015 · 6 revisions

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
  • 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


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.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.