New to Kendo UI for jQuery? Start a free 30-day trial

View

Updated over 6 months ago

The View class instantiates and handles the events of a certain screen from the application.

Widget and DOM event handling and data binding can be performed through MVVM or declarative data attribute initialization.

Getting Started

By default, the view wraps its content in a div element. The element type can be changed using the tagName configuration option. The view content may be specified either:

As a string containing HTML, or
By passing the id of the script element containing the HTML markup

Creating Views from HTML String

The following example demonstrates how to create a view from an HTML string.

html

<script>
    var index = new kendo.View('<span>Hello World!</span>');
</script>

Creating Views as Script Template

The following example demonstrates how to create a view by passing the id of the script element containing the HTML markup.

html

<script id="index" type="text/x-kendo-template">
    <span>Hello World!</span>
</script>

<script>
    var index = new kendo.View('index');
</script>

The view renders its contents using the render method, which accepts a jQuery selector, or object, to which the contents is appended. Alternatively, the render method can be called without parameters in order to retrieve the View element for manual insertion or further manipulation. The view instantiates its content the first time its render method is called. If the content is retrieved from a script element, the script element should be present in the DOM when the rendering is performed. In most cases, views should be rendered in the router init event handler, or in the router route callbacks.

Rendering Views in Containers

The following example demonstrates how to render a view in a container.

html

<div id="app"></div>

<script>
    var index = new kendo.View('<span>Hello World!</span>');

    index.render("#app");
</script>

Appending the view Element

Note that subsequent render calls will not re-instantiate the view element, but will append it to the given container (if provided), or return a reference to the existing view element if no container is provided, as shown below.

html

<div id="app"></div>

<script>
    var index = new kendo.View('<span>Hello World!</span>');

    $("#app").append(index.render());
</script>

Integrating Views with MVVM

If an observable object is passed as a model configuration option to the view constructor, the view binds it to the element when instantiated. If no model is present, the content will be processed using data attribute initialization.

If the view evalTemplate configuration option is set to true, the template is treated as a Kendo UI Template and evaluated against the passed model instance when the view is rendered initially.

Changing the viewModel fields does not re-render the view template. To display dynamic data, use the data-bind syntax.

The following example demonstrates an MVVM-bound view.

html

<script id="index" type="text/x-kendo-template">
    <div>Hello <span data-bind="text:foo"></span>!</div>
</script>

<script>
    var model = kendo.observable({foo: "World"});
    var index = new kendo.View('index', {model: model});
</script>

The following example demonstrates an MVVM-bound view with an evaluated template.

html

<div id="container"></div>

<script id="index" type="text/x-kendo-template">
    #: foo #
    <div>Hello <span data-bind="text:foo"></span>!</div>
</script>

<script>
    var model = kendo.observable({foo: "World"});
    var index = new kendo.View('index', {model: model, evalTemplate: true});
    index.render("#container");
</script>

Removing and Destroying Views

In certain scenarios, you can destroy a view to free browser resources. When destroyed, its element will be removed from the DOM and its MVVM bindings will be removed.

If a certain view is used to display different data in the same format, such as item details from a list, it is recommended to reuse a view instance and change its contents through MVVM bindings instead of re-creating a new instance each time such a detail is displayed.