listview template function data change persists

Question

function templateFunction(itemPromise) {
    return itemPromise.then(function (item) {
        var data = item.data;
        data.date = new Date(data.date);
        ...
    });
}

In this template function for a listview, I change the data.date value from a string to date object as shown.

This works fine the first time, however if I navigate to other page and come back to this page back, it gives error.  When debugging I find that data.date is not a string as it suppose to be but it is a date object which was changed the first time.  How does the change persists after navigating out and back?

 

Answer 1

Hi!

I assume that data.date originally has a String value.

What your code is doing is replacing "data.date" value with a Date object the first time its run, so the second time, instead of having your original String value, it has a Date Object, because you modified your original collection's item.

If you are using "data.date" to set some value on the ListView template, use a variable for that and don't overwrite the original value:

function templateFunction(itemPromise) {
    return itemPromise.then(function (item) {
        var data = item.data;
        var dateObject = new Date(data.date);
        ...
        //use dateObject instead of data.date in your template
    });
}

Answer 2

Thanks for your answer.  I didn't know overwriting will modify the original collection.  However I need the data in its original form.   How can I get item.data to a variable which when modified doesn't modify the original collection. 

Looking in to cloning an object, should find an answer.