Databind fails when navigating to the current page

2 posts, 0 answers
  1. Peter
    Peter avatar
    2 posts
    Member since:
    May 2015

    Posted 17 Jun 2015 Link to this post

    If I navigate to a page, either in code (using app.navigate) or using a link in the Drawer I'm finding that the page does not databind if that page is already open.

    To reproduce the issue, create a new Hybrid Kendo UI Drawer project and paste the following code into home.html:​

     

    <div data-role="view" data-title="Home" data-layout="main" data-model="APP.models.home" data-reload="true" >
      <h1 data-bind="html: title" id="title"></h1>
      <button type="button" data-role="button" data-click='foo' class="btn-ok">Reload</button>
    </div>
     
    <script>
        function foo() {
            var d = new Date();
            var n = d.toLocaleTimeString();
            APP.models.home.title = "Reloaded at " + n;
            app.navigate("views/home.html", "");   
        }
    </script>

     The "var app;" in app.js will also need to be moved up to the first line in the file.

     

    The first time the home page loads the default title is displayed. Pressing the "Reload" button changes the title in the model and navigates to the home page, but the title displayed on the page remains unchanged, even though the value in the model has changed. Selecting "Home" from the application drawer has the same problem. The only way I can find to force a databind is to navigate to ANOTHER page and then to the home page.

    Any ideas how I can resolve this issue?

  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 22 Jun 2015 Link to this post

    Hi Peter,

    In order to update the view when the Home value changes. the home viewmodel has to notify the view that a change in one of the properties occurred. I would therefore recommend that you take advantage of the kendo.data.ObservableObject which supports change tracking and notifies any subscribers when a change occurs. Have a look at the ObservableObject documentation for more information on how to use it and how to get and set the ObservableObject items.

    In order to test the ObservableObject in the Kendo UI Drawer project and update the title of teh Home view per your requirements, the following changes are required:
    window.APP = {
        models: {
            home: kendo.observable({
            title: 'Home'
        }),
        settings: {
            title: 'Settings'
        },
        contacts: {
            title: 'Contacts',
            ds: new kendo.data.DataSource({
            data: [{ id: 1, name: 'Bob' }, { id: 2, name: 'Mary' }, { id: 3, name: 'John' }]
            }),
            alert: function(e) {
            alert(e.data.name);
            }
        }
        }
    };
    <div data-role="view" data-title="Home" data-layout="main" data-model="APP.models.home" data-reload="true">
        <h1 data-bind="html: title" id="title"></h1>
        <button type="button" data-role="button" data-click='foo' class="btn-ok">Reload</button>
    </div>
     
    <script>
        function foo() {
            var d = new Date();
            var n = d.toLocaleTimeString();
            APP.models.home.set("title", "Reloaded at " + n);
            app.navigate("views/home.html", "");
        }
    </script>

    Let me know if you need more information.

    Regards,
    Tina Stancheva
    Telerik
     

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

     
Back to Top