Error in binding viewmodel phonegap mobile

2 posts, 0 answers
  1. Anupam
    Anupam avatar
    3 posts
    Member since:
    Nov 2014

    Posted 07 Dec 2014 Link to this post

    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,;

    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.
  2. Tina Stancheva
    Tina Stancheva avatar
    3298 posts

    Posted 10 Dec 2014 Link to this post

    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,; 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 () {
        app.changeSkin = function (e) {
        app.application = new, { layout: "tabstrip-layout" });
        kendo.bind($("#view2"), vm,;
    }, 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.

    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.

    Tina Stancheva

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

Back to Top