How does Kendo Mobile Music Store bind the viewMode without calling dataSource.read()

[Thomas]

I've set up a project following the KendoUI Mobile Music Store example and am having trouble binding my data to the model.

I've used the source code that is available on Github and can't seem to figure out how the DataSource is being populated without ever doing a DataSource.read();

The example I give below is my take on the example, but you could check out the artists-view.js to see the same.

Okay, the view javascript:

define(["kendo", "app/data"], function (kendo, data) {

 

    return {


        viewModel: kendo.observable({

            myData: data.myData

        })

    }

});

The relevant bits of the data class:

define(["jQuery", "kendo", "app/environment", "app/utils"], function ($, kendo, config, utils) {
    var DataSourceConfig = function (url, sortField, options) {
        this.transport = {
            read:
                {
                    url: url,
                    dataType: 'jsonp',
                }
        }
        this.sort = {
            field: sortField,
            dir: "asc"
        };
        $.extend(this, options || {});
    };

    DataSourceConfig.prototype = {
        type: "GET",
        requestStart: function () { if (this.pageSize() === undefined || this.page() === 1) { utils.showLoading(); } }, //infinite scrolling has its own, less obtrusive indicator
        requestEnd: function () { utils.hideLoading(); },
        error: function () { utils.hideLoading(); utils.showError("There was an error loading the data from the server. Please close the app and try again."); }
    };

    return {
        clear: function (dataSource) {
            dataSource.view().splice(0, dataSource.view().length);
        },

        myData: new kendo.data.DataSource(new DataSourceConfig(config.myDataUrl)),
    };
});

Now, this all works (sort-of) fine, but the datasource is never populated, and I feel like that is because the read() is never called.  How is this working in the example?

[Alexander Valchev]

Hi Thomas,

DataSource is automatically read by the widget that is bound to it unless the autoBind option is enabled.
In your case, does the DataSource starts an Ajax request to the server at all? Are there any JavaScript errors?
Did you tried to call the read method manually and see if this have effect?

In case those questions does not lead you to the right direction, I would like to ask you to isolate the case in a simplified project and send it to me. In this way I will be able to examine your exact scenario and provide you with a concrete recommendations.
Thank you in advance.

Regards,
Alexander Valchev
Telerik

[Thomas]

Thanks for the response, I see what you mean, now. 

So, the problem I'm having, is that I don't think I'm binding to a "widget."  See, I tried it out, and something like this works (binding to a listview):

<ul data-role="listview" data-bind="source: navigation" data-template="navigation-template"></ul>

However, what I want to do, is not bind to a list, but bind simple fields to simple HTML tags (h1, span, etc...), like this (doesn't work):

<span data-bind="text: myData.CompanyCode"></span>

[Alexander Valchev]

Hello Thomas,

Could you please provide a small but runnable jsBin sample which demonstrates your scenario?
In this way I will be able to examine the exact setup and assist you further. Thank you in advance for the cooperation.

Regards,
Alexander Valchev
Telerik