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

MVVM Visible binding

1 Answer 357 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
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

Sort by
0
Accepted
Alexander Valchev
Telerik team
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">
    <div data-bind="visible: isVisible">some content</div>
    <a data-role="button" data-bind="click: hide">Hide</a>
</div>
 
<script>
    var app = new kendo.mobile.Application(document.body, { transition: "slide" });
      
    var viewModel = kendo.observable({
        isVisible: true,
        hide: function() {
            this.set("isVisible", false);
        }
    });     
      
</script>

I hope this will help.

Kind regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
MVVM
Asked by
David
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or