ons lazy repeat delegate when getting response from database

[jcdenton]

Hi, I have this code inside my controller (i use ‘controllerAs’ syntax).

var offw = this;
dbService.selectAllWordsFromDB().then(function(words){
        console.log(words);
        offw.delegate = {
            configureItemScope: function(index, itemScope) {
                itemScope.wordFrom =  words.item(index).wsource;
                itemScope.wordTo =  words.item(index).wtranslation;
            },
            countItems: function() {
                return words.length;
            },
            calculateItemHeight: function() {
                return 48;
            }
        };
    });

dbservice returns the result of the query (res.rows). When I get the result I want to create the lazy repeat list but I get this error:

delegate" parameter must be an object.

If I put the delegate initialization code outside the select function then the list renders ok (but without the data i need to show).
Is there a proper way to create the list when I have the data? Is it a good idea to call the select function inside the configureItemScope field of the delegate object? That would mean that it would make too many calls to the database while scrolling… right?

Thanks in advance

---

EDIT

Changing my code to this, solved the issue

offw.wordList = [];
dbService.selectAllWordsFromDB().then(function(words){
        offw.wordList = words;
    });

    offw.delegate = {
        configureItemScope: function(index, itemScope) {
            itemScope.wordFrom =  offw.wordList.item(index).wsource;
            itemScope.wordTo =  offw.wordList.item(index).wtranslation;
        },
        countItems: function() {
            return offw.wordList.length;
        },
        calculateItemHeight: function() {
            return 48;
        }
    };

But I would like to hear some comments on this or a better approach if any. Thanks

[IliaSky]

I’m glad you managed to solve the issue.

When you specify the delegate it must be an object and it should contain at least the countItems and configureItemScope methods.

You seem to have already found your solution, in my opinion that is probably the best one out there.

Alternatives may include things like loading the page with the lazy repeat only after you receive the data or calling it from configureItemScope but in a smart way.

In general if you’re using lazy repeat it makes sense only when the number of items is around 1000+, in which case maybe you could get them from the server in chunks rather than all of them from the beginning.

Also if you’ve already gotten something from the server you should remember it rather than making another request for it.

So you could do something like

var chunks = [];
var chunkSize = 1000;
var wordCount = chunkSize;

dbService.getChunkFromDB(0).then(function(chunk){
    chunks[0] = chunk;
});

dbService.getWordCount().then(function(count){
    wordCount = count;
});

function configureItem(src, dest) {
    dest.wordFrom = src.wsource;
    dest.wordTo = src.wtranslation;
}

offw.delegate = {
    configureItemScope: function(index, itemScope) {
        var i = Math.floor(index / chunkSize);
        var j = index % chunkSize;

        if (i > chunks.length) {
            dbService.getChunkFromDB(i).then(function(chunk){
                chunks[i] = chunk;
                configureItem(chunks[i].item(j), itemScope);
            });
        } else {
            configureItem(chunks[i].item(j), itemScope);
        }
    },
    countItems: function() {
        return wordCount;
    }
};

But you can see that these things look a little ugly and need changes to the server/dbService, so maybe you try out things like these only at a later point and only if you think that it’s necessary.
It all depends on the amount of data which you’re working with.

Anyway for now I think what you have should be enough. Just don’t forget to unindent properly ;)

[jcdenton]

@IliaSky Thanks for your response!

[Carson H]

How did you get the configureItemScope function to wait for the wordlist to be loaded from the db? I get “cannot read property ‘0’ of undefined” when I try something similar.