Problem with data binding when using a Layout

[Allan]

I'm trying to wrap my head around the data binding feature of kendo. I'm building a mobile app.
I use the following code for my databinding

var app = new kendo.mobile.Application(document.body);
    
    var dayViewModel = kendo.observable(
    {
        todayText: "_",
        showNextDay: function () {
            alert("next");
        },
        showPreviousDay: function () {
            alert("previous");
        }
    });


    kendo.bind($("#dayView"), dayViewModel, kendo.mobile.ui);

As soon as kendo.bind is invoked, the Layout is lost. If the view already has a header element specified, this element is shown instead. Why is this happening?

Also, I've tried a bit further, since the reason why I need to invoke kendo.bind manually, is that I want to load data into the viewModel from a ajax response. I've added the following code for the ajax request

$(function () {
        $.get("request_url", function (data) {
            dayViewModel.todayText = data.DayDescription;
            
            kendo.bind(document.body.children, dayViewModel, kendo.mobile.ui);
        });
    });

And it works just is intended, but I'm still not able to use my Layout. Although I've discovered that if I comment out the first call to kendo.bind, the Layout is applied. Although then the header grows to about double height. And I've got no custom styles or similar.

[Petyo]

Hello Allan,

 Take a look at this help article for the recommended (and supported) approach for using Kendo UI Mobile with MVVM. You may look into the source code of the MVVM version of our sushi demo. 

Greetings,
Petyo
the Telerik team

[Allan]

The sample answers all of my questions!

But the getting started pieces are thin and leaves a lot of questions unanswered. You should make sure samples such as that is easily accesible - at least I've been through a lot of the docs and didn't notice this sample.

I'd encourage you to make more samples like that available :-)

Allan