Add methods to an object with object notation

Question

I have the following code:

Template.leaderboard.players = function() {
    return Players.find({}, {sort: {score: -1, name: 1}});
};

Template.leaderboard.selected_name = function() {
    var player = Players.findOne(Session.get("selected_player"));
    return player && player.name;
};

And I would like to organize it more clearly like that:

Template.leaderboard = {
    players: function() {
        return Players.find({}, {sort: {score: -1, name: 1}});
    },
    selected_name: function() {
        var player = Players.findOne(Session.get("selected_player"));
        return player && player.name;
    }
};

The problem is (I believe from the errors in the console) that this overwrites all the existing methods of the Template.leaderboard object and replaces it.

Is there a possibility to add those methods to the object while keeping existing methods using the kind of notation shown above?

@TomSarduy this looks like a namespace, not an "OO" object to me. — Alnitak, Feb 02 '13 at 22:45

Alnitak · Answer 1 · 2013-02-02T22:49:27.830

You can either add them one at a time as you've done in your first example, or you can use a method that merges an object with another, such as jQuery's .extend:

$.extend(Template.leaderboard, {
    newMethod1: function() {
        ...
    },
    newMethod2: function() {
        ...
    }
});

Using the latter method, you also need to be sure that Template.leaderboard actually exists, first!

var Template = Template || {};
Template.leaderboard = Template.leaderboard || {};

Code like the above would be typical if Template is actually defined across multiple JS files, and allows you to keep adding methods without regard to which order the files are actually loaded.

score 2 · Accepted Answer · answered Feb 02 '13 at 22:48

2

I think you're looking for Template helpers

Template.leaderboard.helpers({
    players: function() {
        return Players.find({}, {sort: {score: -1, name: 1}});
    },
    selected_name: function() {
        var player = Players.findOne(Session.get("selected_player"));
        return player && player.name;
    }
});

answered Feb 02 '13 at 22:48

Kyle Finley

11,842
6
43
64

ah, I did wonder if Meteor had its own equivalent to ".extend" but couldn't find it. – Alnitak Feb 02 '13 at 22:50
Perfect. Good to know there is no javascript construct to do it. – Matthieu Napoli Feb 02 '13 at 23:05

score 0 · Answer 3 · edited May 23 '17 at 12:12

There is a post here that answers this without the use of jquery or any other library.

function merge_options(obj1,obj2){
    var obj3 = {};
    for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; }
    for (var attrname in obj2) { obj3[attrname] = obj2[attrname]; }
    return obj3;
}

Source: (How can I merge properties of two JavaScript objects dynamically?).

In your case:

var newObject = {};

var tempObject = {
    players: function() {
        return Players.find({}, {sort: {score: -1, name: 1}});
    },
    selected_name: function() {
        var player = Players.findOne(Session.get("selected_player"));
        return player && player.name;
    }
};

for (var attrname in Template.leaderboard) {
    newObject[attrname] = Template.leaderboard[attrname];
}

for (var attrname in tempObject) {
    newObject[attrname] = tempObject[attrname];
}

Template.leaderboard = newObject;

Add methods to an object with object notation

3 Answers3