Search code examples
javascriptkendo-uikendo-mobilerevealing-module-pattern

Why does this.set not work used in this Javascript function in Kendo

I have a Kendo Mobile app and trying to write a ViewModel using the Revealing Module Pattern.

In my HTML, I bind the list to gamesListDataSource. OnInit, I Fetch the data and then I need to tell me HTML that the datasource has changed. This code all works fine (although I think I am doing something the long way here as I could somehow expose the datasource directly).

1) if I comment out this line: GamesListViewModel.refreshGamesList(dataSource); and uncomment this line: this.set("gamesListDataSource", dataSource); so that it is called directly in the loadGamesList function then it falls over with "Uncaught TypeError: Object [object Object] has no method 'set'"

I assume it is something to do with the fact that fetch() is asynch, but I don't understand why calling another function works fine?

gamesList.js

(function (global) {
    var GamesListViewModel,
        app = global.app = global.app || {};

    GamesListViewModel = kendo.observable({
        gamesListDataSource: {},

        refreshGamesList: function (dataSource) {
            //this works fine if called in a function, but not inline in loadGamesList()
            this.set("gamesListDataSource", dataSource);
        },

        loadGamesList: function () {
            dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: app.configuration.getGamesListUrl,
                        dataType: "json",
                    }
                }

            });
            console.log(dataSource.total());
            dataSource.fetch(function () {
                console.log('done reading');
                console.log(dataSource.total());

                //uncommenting this line below breaks it
                //this.set("gamesListDataSource", dataSource);
                GamesListViewModel.refreshGamesList(dataSource);
            });
        },

        onInit: function (e) {
            console.log("GamesListViewModel - onInit");
            GamesListViewModel.loadGamesList();
        }
    });

    app.gamesListService =
    {
        viewModel: GamesListViewModel
    };
})(window);

gamesList.html

<!DOCTYPE html>
<html>
    <head>
        <title>Games</title>
    </head>
    <body>
        <div id="tabstrip-home"
             data-role="view"
             data-title="Poker Games"
             data-init="app.gamesListService.viewModel.onInit" 
             data-model="app.gamesListService.viewModel">

            <div data-role="button" data-bind="click:loadGamesList">Do it</div>

            <ul class="games-list"
                data-role="listview"
                data-bind="source: gamesListDataSource"
                data-template="games-template">
            </ul>

        </div>

        <script type="text/x-kendo-template" id="games-template">
            <div class="product">
                <h4>#:Title#</h4>
            </div>
        </script>
    </body>
</html>
Solution

  • Take a look at the data source fetch method in kendo.data.js; in essence, it does something like this:

    fetch: function (callback) {
    var that = this;

    ...

    if (fetchSuccessful) {
        if (callback) {
            // as you can see here, when invoking your callback,
            // the code binds "this" to the data source instance
            // you called .fetch() on
            callback.call(that, e);
        }
    }
},

    This pattern is used in many other methods which accept callbacks - with Kendo UI, you can in general expect this to be the widget you called a method on. Your other call works because you reference the GamesListViewModel variable instead of this. You could also do:

    GamesListViewModel.set("gamesListDataSource", dataSource);