为什么在剑道的Javascript函数中使用this.set不起作用_Javascript_Kendo Ui_Kendo Mobile_Revealing Module Pattern

为什么在剑道的Javascript函数中使用this.set不起作用

javascript kendo-ui

为什么在剑道的Javascript函数中使用this.set不起作用,javascript,kendo-ui,kendo-mobile,revealing-module-pattern,Javascript,Kendo Ui,Kendo Mobile,Revealing Module Pattern,我有一个剑道移动应用程序，正在尝试使用显示模块模式编写ViewModel 在我的HTML中，我将列表绑定到gamesListDataSource。OnInit，我获取数据，然后我需要告诉我HTML数据源已经更改。这段代码都可以正常工作（尽管我认为我在这里做了很多工作，因为我可以直接公开数据源） 1）如果我注释掉这一行：GamesListViewModel.refreshGamesList（数据源）；并取消对此行的注释：this.set（“gamesListDataSource”，dataSo

我有一个剑道移动应用程序，正在尝试使用显示模块模式编写ViewModel

在我的HTML中，我将列表绑定到gamesListDataSource。OnInit，我获取数据，然后我需要告诉我HTML数据源已经更改。这段代码都可以正常工作（尽管我认为我在这里做了很多工作，因为我可以直接公开数据源）

1）如果我注释掉这一行：GamesListViewModel.refreshGamesList（数据源）；并取消对此行的注释：this.set（“gamesListDataSource”，dataSource）；因此，它直接在loadGamesList函数中调用，然后它会出现“UncaughtTypeError:Object[Object Object]没有方法“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>


游戏
做吧


#：标题#

查看

kendo.data.js

中的数据源获取方法；本质上，它是这样做的：

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

这种模式在许多其他接受回调的方法中使用——对于剑道UI，您通常可以期望

This

是您在其上调用方法的小部件。您的另一个调用之所以有效，是因为您引用了

GamesListViewModel

变量，而不是

this

。你也可以这样做：

GamesListViewModel.set("gamesListDataSource", dataSource);

谢谢你的解释