Databind fails when navigating to the current page

[Peter]

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?

[Tina Stancheva]

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