为什么 this.set 在剑道的这个 Javascript 函数中不起作用答案

【问题标题】：Why does this.set not work used in this Javascript function in Kendo为什么 this.set 在剑道的这个 Javascript 函数中不起作用
【发布时间】：2014-02-17 09:48:24
【问题描述】：

我有一个 Kendo Mobile 应用程序并尝试使用显示模块模式编写一个 ViewModel。

在我的 HTML 中，我将列表绑定到 gamesListDataSource。 OnInit，我获取数据，然后我需要告诉我 HTML 数据源已更改。这段代码一切正常（尽管我认为我在这里做了很长的路要走，因为我可以以某种方式直接公开数据源）。

1) 如果我注释掉这一行： GamesListViewModel.refreshGamesList(dataSource); 并取消注释这一行： this.set("gamesListDataSource", dataSource); 以便在 loadGamesList 函数中直接调用它，然后它会因“未捕获的 TypeError：Object [object Object] has no method 'set'”而崩溃

我认为这与 fetch() 是异步的事实有关，但我不明白为什么调用另一个函数可以正常工作？

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>

【问题讨论】：

标签： javascript kendo-ui kendo-mobile revealing-module-pattern

【解决方案1】：

看看kendo.data.js中的数据源fetch方法；本质上，它做了这样的事情：

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);
        }
    }
},

此模式用于许多其他接受回调的方法 - 在 Kendo UI 中，您通常可以期望 this 是您调用方法的小部件。您的另一个调用有效，因为您引用了GamesListViewModel 变量而不是this。你也可以这样做：

GamesListViewModel.set("gamesListDataSource", dataSource);

【讨论】：

感谢您的解释