Question

I have a class Playlist :

function Playlist() {
    this.episodes = [ /*episode list*/ ];
};

and I want to make a method displaying each episode :

Playlist.prototype.display = function() {
    $('.episodeList').each(function(index) {
        $(this).children('title').text(this.episodes[index].title);
    });
}

The problem is that the ‘this’ at the end, before ‘.episodes[index]’ represent the dom object selected and not my playlist.

How can I solve this problem ? Thanks.

Answer 1

A common practice in Javascript is to make a new variable for storing the current class, since the content of the this variable changes with context. Consider something like

    function Playlist()
    {
        var self = this;
        this.episodes = [/*episode list*/];

        this.display = function()
        {
            $('.episodeList').each(function(index) {
                $(this).children('title').text(self.episodes[index].title);
            });
        }
    };

for your Playlist class definition, and call myPlaylist.display()
to display the content.