1

Kendo Mobile アプリがあり、Revealing Module パターンを使用して ViewModel を作成しようとしています。

私の HTML では、リストを gamesListDataSource にバインドします。OnInit では、データをフェッチしてから、データソースが変更されたことを HTML に通知する必要があります。このコードはすべて正常に動作します (ただし、データソースを直接公開できるので、ここで長い道のりを行っていると思います)。

1) この行をコメントアウトした場合: GamesListViewModel.refreshGamesList(dataSource); 次の行のコメントを外します: this.set("gamesListDataSource", dataSource); loadGamesList 関数で直接呼び出されるようにすると、「Uncaught 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>
4

1 に答える 1

3

のデータ ソース フェッチ メソッドを見てください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);
        }
    }
},

このパターンは、コールバックを受け入れる他の多くのメソッドで使用されます。Kendo UI では、通常this、メソッドを呼び出したウィジェットになることが期待できます。GamesListViewModelの代わりに変数を参照するため、他の呼び出しは機能しますthis。次のこともできます。

GamesListViewModel.set("gamesListDataSource", dataSource);
于 2014-02-17T10:21:47.910 に答える