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

4 posts, 0 answers
  1. Thomas
    Thomas avatar
    5 posts
    Member since:
    Nov 2013

    Posted 18 Dec 2013 Link to this post

    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?
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 19 Dec 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Thomas
    Thomas avatar
    5 posts
    Member since:
    Nov 2013

    Posted 19 Dec 2013 Link to this post

    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>
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 19 Dec 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready