jQuery on event handler losing scope of parent object

Question

I have an object that has multiple functions being registered to events on page load. This seems to be working fine. However, I am having an issue getting the scope of the object once the event happens. this seems to only pull in the element that is being triggered by the event. I was wondering if anyone could help and tell me where I went wrong?

EDIT 1

I felt that code snippet was pretty concise to the problem. However, I can see where my question may be perceived as lazy.

I have an object that has multiple functions triggered off of events that are dynamically being wired up on load which can be seen here:

var collection = function() {
    var _c = {};
    _c.el = '#container',
    _c.buildItems = function(){
        var $el = $('#content2');
        var template = Handlebars.compile($("#tpl-collection-item-row").html());
        var data = [
            {id: 1, val: 'test 1', text: 'this is a test... 1'},
            {id: 2, val: 'test 2', text: 'this is a test... 2'},
            {id: 3, val: 'test 3', text: 'this is a test... 3'},
        ];

        $el.append(template(data));
    },
    _c.clickStuff = function() {
        alert("hey!");
    },
    _c.moreClicking = function() {
        alert("i knew this would work");
    },
    _c.events = [
        {target: '.row', event: 'click', func: 'clickStuff'},
        {target: '#gettingIt', event: 'click', func: 'moreClicking'}
    ],
    _c.initialize = function() {
        var _this = this;
        $.each(this.events, function(){
            var func = _this[this.func]
            $(_this.el).on(this.event, this.target, func);
        });
    },
    _c.render = function() {
        this.initialize();
        this.buildItems();
    }
    return _c;
}

_c.buildItems is a function that is called to trigger my handlebars template from _c.render(). Prior to this happening I am calling a function to wire up events listed in my _c.events array that take the target object and the type of event happening and mapping to the func name within my object. This is happening in my _c.initialize function.

The events seem to be working perfectly fine. However, I am unsure how to get the scope of my collection function from within functions like _c.clickStuff when they are triggered. I am unsure how to do this and it would be great if someone can explain to me where I went wrong?

Here is a fiddle of my code: https://jsfiddle.net/0s8vb8m3/3/

Answer 1

You can just reference the _c in your code as it is in the scope of your "collection" function.

	var collection = function() {
	    var _c = {
	        el: '#container'
	    };

	    _c.buildItems = function() {
	        var $el = $('#content2');
	        var template = Handlebars.compile($("#tpl-collection-item-row").html());
	        var data = [{
	            id: 1,
	            val: 'test 1',
	            text: 'this is a test... 1'
	        }, {
	            id: 2,
	            val: 'test 2',
	            text: 'this is a test... 2'
	        }, {
	            id: 3,
	            val: 'test 3',
	            text: 'this is a test... 3'
	        }];

	        $el.append(template(data));
	    };

	    _c.clickStuff = function() {
	        console.log(_c.el);
	    };

	    _c.moreClicking = function() {
	        alert("i knew this would work");
	    };

	    _c.events = [{
	        target: '.row',
	        event: 'click',
	        func: 'clickStuff'
	    }, {
	        target: '#gettingIt',
	        event: 'click',
	        func: 'moreClicking'
	    }];

	    _c.initialize = function() {
	        $.each(_c.events, function(index, event) {
	            var func = _c[event.func];
	            $(_c.el).on(event.event, event.target, func);
	        });
	    };

	    _c.render = function() {
	        _c.initialize();
	        _c.buildItems();
	    };

	    return _c;
	}

	var c = collection();

	c.initialize();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <div class="row">Blah1</div>
    <div class="row">Blah2</div>
    <div class="row">Blah3</div>
</div>