The MVVM model to bind to. If a string is passed, The view will try to resolve a reference to the view model variable in the global scope.

Example

<script>
 var foo = { bar: "baz" }
</script>

<div data-role="view" data-model="foo">
   <span data-bind="text:bar"></span>
</div>

Applicable to remote views only. If set to true, the remote view contents will be reloaded from the server (using Ajax) each time the view is navigated to.

Example

<!-- foo.html -->
<div data-role="view">
    <a data-role="button" href="bar.html">Go to bar</a>
</div>

<!-- bar.html -->
<div data-role="view" data-reload="true">
    I will be requested from the server every time I am displayed
  <a href="#" id="link">Link</a>
</div>

If set to true, the view will stretch its child contents to occupy the entire view, while disabling kinetic scrolling. Useful if the view contains an image or a map.

The text to display in the navbar title (if present) and the browser title.

(available since Q1 2013) If set to true, the view will use the native scrolling available in the current platform. This should help with form issues on some platforms (namely Android and WP8). Native scrolling is only enabled on platforms that support it: iOS > 4, Android > 2, WP8. BlackBerry devices do support it, but the native scroller is flaky.

If set to true, the user can zoom in/out the contents of the view using the pinch/zoom gesture.

Prepares the View for safe removal from DOM. Detaches all event handlers and removes jQuery.data attributes to avoid memory leaks. Calls destroy method of any child Kendo widgets.

Example

var view = $("#myView").data("kendoMobileView");

// detach events
view.destroy();

Retrieves the current content holder of the View - this is the content element if the View is stretched or the scroll container otherwise.

Example

var view = $("#myView").data("kendoMobileView");

view.contentElement();

Fires after the mobile View becomes visible. If the view is displayed with transition, the event is triggered after the transition is complete.

Example

<div data-role="view" id="foo">
    <a href="#bar" data-role="button">Go to bar</a>
</div>

<div data-role="view" id="bar" data-after-show="afterShow">
    Bar
</div>

<script>
    var app = new kendo.mobile.Application();
    function afterShow(e) {
        console.log(e.view);
    }
</script>

Fires before the mobile View becomes visible. The event can be prevented by calling the preventDefault method of the event parameter, in case a redirection should happen.

Example

<div data-role="view" id="foo">
    <a href="#protected" data-role="button">Go to protected</a>
</div>

<div data-role="view" id="protected" data-before-show="redirectBack">
    I am a protected view
</div>

<script>
    var app = new kendo.mobile.Application();
    function redirectBack(e) {
        e.preventDefault();
        app.navigate("#foo");
    }
</script>

Fires when the mobile View becomes hidden.

Fires after the mobile View and its child widgets are initialized.

Fires when the mobile View becomes visible.

The View (or the applied mobile layout) header DOM element.

The View (or the applied mobile layout) footer DOM element.

The View content DOM element. If there is a scroller in the View, it will become a child of this element. Please use the contentElement method instead, to always get the correct content element.

The View mobile scroller container DOM element. Recommended if scrollable mobile View contents need to be manipulated or replaced. If you don't know if the View has a Scroller initialized, please use the contentElement method instead.

Replace scrollable View contents

<div data-role="view" data-init="replaceContents"> ... </div>
<script>
    function replaceContents(e) {
      e.view.scrollerContent.html("<b>New content</b>");
    }
</script>