View "code-behind"

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

The view class

If the JavaScript file for the view's "code-behind" is not found, a generic/empty view object is created.

Methods of the IVistoView interface
  • Event methods
  • getElement(selector: string): JQuery: Performs a JQuery select and replaces "vId_" placeholders if necessary. Do not directly use JQuery selectors to select a HTML element by ID as they do not support multiple view instances (more information below).
  • getDomElementById(id: string): HTMLElement:* Gets a HTML element by ID and resolves "vId_" placeholders

Properties of the IVistoView interface
  • viewId
    • ID of the view (vId)
  • parameters
  • viewModel
  • viewManager
    • The Visto view manager object (can also be imported with RequireJS)
  • dialog
    • JQuery object with DOM element

Instantiate views

In HTML

A view can be created using the "view" knockout binding:

<div>
	<div data-bind="view: {name: 'SampleView', param1: 1, param2: 'test' }"></div>
</div>

To load a view from another package, use an array as name parameter:

<div>
	<div data-bind="view: { name: ['otherPackage', 'OtherSampleView'] }"></div>
</div>

Or the short version (recommended):

<div>
	<div data-bind="view: { name: 'otherPackage:OtherSampleView' }"></div>
</div>

In code

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

$("myElement").view("SampleView", { param1: 1, param2: 'test' } );

However you should never use the JQuery selector above to select an element by ID but the getElement method (see below).

Important: The code above always looks up the view in the "app" package because the "view" method does not know the current package. It is recommended to always use the "module" import as the first name parameter to avoid package problems (as described on the package page). This way it is possible to rename a package and the views are still found.

Support for multiple view instances

To avoid problems with multiple view instances you should never use the JQuery selector to select an element by ID. Always use the getElement method of the view class to select an element. The HTML element's ID has to start with "vId_" which is automatically replaced with the view instance's ID. This way it is possible to create multiple view instances from the same type which contains HTML elements with the same IDs.

<div>
	<div id="vId_myDiv"></div>
</div>

The code in a method of the view "code-behind" class:

this.getElement("myDiv").view("SampleView", {param1: 1, param2: 'test'});

See View HTML


Last edited Jul 11, 2013 at 2:52 PM by rsuter, version 31

Comments

No comments yet.