This is a migrated thread and some comments may be shown as answers.

MVVM Visible binding

1 Answer 438 Views

MVVM

This is a migrated thread and some comments may be shown as answers.

David asked on 13 Dec 2012, 10:50 PM

I am trying to follow along with the sample at http://docs.kendoui.com/getting-started/framework/mvvm/bindings/visible. I am using Icenium to build a mobile app, my index page consists of:

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="utf-8" />

<script src="cordova.js"></script>

<script src="kendo/js/jquery.min.js"></script>

<script src="kendo/js/kendo.mobile.min.js"></script>

<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />

</head>

<body>

<div id="view" data-role="view">

<div data-bind="visible: isVisible">some content</div>

<button data-bind="click: hide">Hide</button>

</div>

<script>

var app = new kendo.mobile.Application(document.body, { transition: "slide" });

var viewModel = kendo.observable({

isVisible: true,

hide: function() {

this.set("isVisible", false);

}

});

kendo.bind($("#div"), viewModel, kendo.ui.mobile);

</script>

</body>

</html>

Yet when I click the button in the simulator, the content is not hidden ... is this a bug in the version of kendo UI mobile that icenium uses, or am I doing something wrong? According to the kendo.mobile.min.js it appears to be v2012.2.913.

1 Answer, 1 is accepted

Accepted

answered on 15 Dec 2012, 09:08 AM

Hi David,

The view model is bound incorrectly - there is no element with id="div" on the page.
I recommend you to use the data-model property of the mobile View component. Please try the following:

<div id="view" data-role="view" data-model="viewModel">