Remote Datasource and Remote Views + MVVM - mvvm

Question

I am trying to separate my Views and ViewModels in a Kendo Mobile app (ie. not MVC). I have a remote datasource in a ViewModel and cannot get it to work - I am sure it is something simple (I can't find a Kendo example that uses a Remote DataSource in a ViewModel - it is all inline. (http://demos.telerik.com/kendo-ui/web/mvvm/remote-binding.html, http://docs.telerik.com/kendo-ui/getting-started/framework/datasource/overview)
It just shows this "function (e){var n=this;return e===t?n._data:(n._data=this._observe(e),n._ranges=[],n._addRange(n._data),n._total=n._data.length,n._process(n._data),t)}" and not the actual data.
games.html View
<div id="tabstrip-home"
data-role="view"
data-title="Games"
data-model="app.gamesService.viewModel">
<ul class="games-list"
data-bind="source: gamesDataSource"
data-template="template">
</ul>
</div>
<script type="text/x-kendo-template" id="template">
<div class="product">
<h3>#:ProductName#</h3>
<p>#:kendo.toString(UnitPrice, "c")#</p>
</div>
</script>
games.js ViewModel
(function (global) {
    var GamesViewModel, app = global.app = global.app || {};
 
    GamesViewModel = kendo.data.ObservableObject.extend({
                                                            gamesDataSource: new kendo.data.DataSource({
                                                                                                           transport: {
                                                                    read: {
                                                                                                                   url: "http://demos.telerik.com/kendo-ui/service/Products",
                                                                                                                   dataType: "jsonp"
                                                                                                               }
                                                                }
                                                                                                       })
                                                             
                                                        });
    app.gamesService = {
        viewModel: new GamesViewModel()
    };
})(window);

Answer 1

I found an example and managed to get this working, although the javascript is a little different. I'll have to read up on
(function (global) {
var GamesViewModel,
app = global.app = global.app || {};
GamesViewModel = kendo.data.ObservableObject.extend({
gamesDataSource: null,
init: function () {
var that = this,
dataSource;
kendo.data.ObservableObject.fn.init.apply(that, []);
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/Products",
dataType: "jsonp"
//ProductID":1,"ProductName":"Chai","UnitPrice":18,"UnitsInStock":39,"Discontinued":false
}
}
});
that.set("gamesDataSource", dataSource);
}
});
app.gamesService = {
viewModel: new GamesViewModel()
};
})(window);