Error in binding viewmodel phonegap mobile

[Anupam]

Hello. I have created a Kendo UI core widget project. I have created a viewmodel source code as home.js and am try to bind it with div of indexx.html.. 

This is the home.js.

var vm = kendo.observable({
    isLoggedIn: true,
    isLoggedIn1: true,
   <other variables, functions});
kendo.bind(document.body($("#view2")), vm, kendo.mobile.ui);

After the binding when i run the code in iphone or android simulator it works perfectly, but when I check it in device, the div tag and its elements are not rendered. If If i remove script tag reference of home.js the page is rendered perfectly fine but then there is no functionality.

Please advice.

[Tina Stancheva]

Hello Anupam,

I posted a reply in the support ticket you submitted. I will post the same information here so that the community can also take advantage of it:

In your sample there are a few things that are causing errors and disabling the app from running as expected.

• In home2.js this line kendo.bind(document.body($("#view2")), vm, kendo.mobile.ui); is incorrect. document.body is an object and you cannot use it as a method. Further, in order to bind the view2 element to the vm model, you have to make sure that view2 is initialized and loaded in the view. For instance you can define an event handler for the tabstrip-home view data-show event and bind the view2 div in it. In the context of the sample-kendoui-core-widgets demo, you can simply move the kendo.bind() method in the deviceready event handler body:

Copy Code

document.addEventListener("deviceready", function () {
    navigator.splashscreen.hide();

    app.changeSkin = function (e) {
       ...
    };

    app.application = new kendo.mobile.Application(document.body, { layout: "tabstrip-layout" });

    kendo.bind($("#view2"), vm, kendo.mobile.ui);
}, false);

• Next in the tabstrip-home definition you have defined a handler for the data-init event:

<div id="tabstrip-home" data-role="view" data-title="Home" data-model="vm" data-init="findHome">

but you have not defined a findHome() method anywhere. This will cause an error when running the app on a device as findHome() cannot be found. Further note that since the tabstrip-home view has a data-model attribute applied, it uses the vm object as model. This means that you don't have to explicitly bind the view or the elements it contains to the vm object through code as well. Please have a look at data-model attribute documentation for more information.

• When it comes to bindings with Kendo UI, I would recommend that you examine the following tutorials:
  • Text binding
  • Value binding
  • Events binding
  • Visible binding
  • Invisible binding
  • Enabled binding
  • Attr binding

In cases where the app doesn't run as expected, you can debug it yourself to find the exact errors causing it to fail. You can check how to debug your app while running it on a device in our documentation. You can also debug the app in the device simulator to make sure there are no errors are thrown.

Regards,
Tina Stancheva
Telerik