Kendo UI Tabstrip not binding

Question

Update: To clarify I am not getting any errors, but it appears that the view renders faster than the binding can be applied, and or even refreshed.

Im catching hell trying to get anything to bind in the tabstrip. I decided to try KendoUI Mobile after PhoneJS, but im getting pretty frustrated in trying to display simple data in an element. Im considering purchasing kendoui mobile, but cannot get simple things to work. I have a simple ViewModel that I cant get to bind. Here is my code below.

<div data-role="view" data-reload="true" id="tabstrip-profile" data-title="Profile" data-layout="mobile-tabstrip">
    <ul id="profile" data-role="listview" data-style="inset" data-type="group">
        <li>Profile
            <ul>
                <b data-bind="text:firstname"></b>
            </ul>
        </li>
    </ul>
</div>

var viewModel = kendo.observable({
        firstname: app.user.firstname,
        lastname:  app.user.lastname
    });
     this shows the correct data --->console.log(viewModel.firstname)

    kendo.bind($('#profile'), viewModel);

Any help would be great!

Answer 1

in Kendo UI Mobile, you don't have to use:

kendo.bind($('#profile'), viewModel);

instead you can use data-model on the view element:

<div data-role="view"
     data-reload="true"
     id="tabstrip-profile"
     data-title="Profile"
     data-layout="mobile-tabstrip"
     data-model="viewModel">

note that this is referenced from global/window scope, so you would probably want to be explicit when creating it:

window.viewModel = ...

---

Also, I think maybe the items in the ListView may not bind directly to the viewModel. I'm not sure exactly how that works because I've never tried to do it the way you are.

Typically you would bind your ListView to an array of items or a DataSource, then each item in the ListView would data-bind against the individual item in the array.

It might be acting goofy because you aren't binding the ListView to an array of data items.