0

I'm using Kendo UI Mobile via Icenium Extension for Visual Studio. I'm very new at this, but I'm stumbling along. I've written a method (called popDataSource) in a view that gets some data (reads the names of files in a folder) and returns those file names. The method works perfectly if I wire it up to a button click event, but what I really want is for the method to be called when the page first loads. I've tried setting data-show=popDataSource and even data-after-show=popDataSource, but when I do that I get the error Object [object Object] has no method 'set' when I try to return the data. I'm also not that well versed in javascript, which I'm sure isn't helping me any.

Here's my code:

Snippet from index.html:

<div id="tabstrip-listSonicImages" data-role="view" data-title="Sonic Images List"    data-model="app.listSonicImagesService.viewModel" 
    data-after-show="app.listSonicImagesService.viewModel.popDataSource">    
    <div data-role="content" class="view-content">
        <div data-role="scroller">
            <div class="buttonArea">
                <a id="btnShowList" data-role="button" data-bind="click: popDataSource" 
class="login-button">Display List</a>
            </div>
            <ul class="forecast-list" data-role="listview" data-bind="source: sonicImagesDataSource" data-template="sonic-image-list-template">
            </ul>
        </div>
    </div> 
</div> 

<script type="text/x-kendo-tmpl" id="sonic-image-list-template">
    <a data-role="listview-link" href="\#tabstrip-playSonicImage?fileName=${fileName}">${fileName}</a> 
</script>

listiconimages.js

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

    SonicImageListViewModel = kendo.data.ObservableObject.extend({
        popDataSource: function () {
            var that = this;
            var listSI = new Array();

            try{
                window.requestFileSystem(LocalFileSystem.PERSISTENT, 0,
                    function (fileSys) {
                        fileSys.root.getDirectory("SIData", { create: true, exclusive: false},
                            function (dataDirEntry) {
                                var directoryReader = dataDirEntry.createReader ();
                                directoryReader.readEntries(
                                    function (entries) {
                                        var rows =  entries.length;
                                        for (i = 0; i < rows; i++) {
                                            var fName = entries[i].name;
                                            listSI[i] = { "fileName": fName, "image": "xxx" };
                                        }
                                    },
                                    function (error) {
                                        alert("error: " + error.code);
                                    }
                                );
                             },
                             null);
                         },
                         null
                     );

                    var dataSource = new kendo.data.DataSource(
                        {
                            data: listSI,
                            filter: { field: "fileName", operator: "endswith", value: ".simg" }
                        }
                    );

                    that.set("sonicImagesDataSource", dataSource);

                } catch (ex) {
                    alert(ex.message);
                }
            }
        });

        app.listSonicImagesService = {
            viewModel: new SonicImageListViewModel()
        };
    }
)(window);

app.js

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

    document.addEventListener("deviceready", function () {
        app.application = new kendo.mobile.Application(document.body, { layout: "tabstrip-layout" });
    }, false);

    app.changeSkin = function (e) {
        if (e.sender.element.text() === "Flat") {
            e.sender.element.text("Native");
            mobileSkin = "flat";
        }
        else {
            e.sender.element.text("Flat");
            mobileSkin = "";
        }

        app.application.skin(mobileSkin);
    };
})(window)

As I said, I'm new to Icenium and Kendo, and my javascript knowledge is limited, so I'm not quite sure where the answer lies. Any help would be greatly appreciated.

Thanks

dversch
  • 81
  • 5
  • `that.set("sonicImagesDataSource", dataSource);` => `that = this` => `this` should be `instanceof SonicImageListViewModel`, which was created by `kendo.data.ObservableObject.extend`. It's saying instances of `SonicImageListViewModel` don't have a method called `set`. – Paul S. Oct 10 '13 at 14:16
  • 1
    I was actually able to get this working by doing: app.listSonicImagesService.viewModel.set("sonicImagesDataSource", dataSource); When first loading, 'this' refers to the view, which does not have a 'set' method. But when called to handle a button click event, 'this' refers to the viewModel, which does have a 'set' method. So by using the line of code above, it always refers to the viewModel instance. (Thanks to Telerik support for the assist.) – dversch Oct 10 '13 at 16:28
  • @dversch Please don't answer question in comments, instead reply via **'Answer'** at the bottom of page. then remove the comment. – Iman Mahmoudinasab Feb 21 '14 at 07:45

0 Answers0