var exports = this;
(function($, exports){
var mod = {};
mod.create = function(includes){
var result = function(){
this.init.apply(this, arguments);
};
result.fn = result.prototype;
result.fn.init = function(){};
result.proxy = function(func){ return $.proxy(func, this); };
result.fn.proxy = result.proxy;
result.include = function(ob){ $.extend(this.fn, ob); };
result.extend = function(ob){ $.extend(this, ob); };
if(includes) result.include(includes);
return result;
};
exports.Controller = mod;
}(jQuery, window));
var exports = this;
jQuery(function($){
exports.SearchView = Controller.create({
elements: {
'input[type=search]': 'searchInput',
'form': 'searchForm'
},
init: function(element){
this.el = $(element);
this.refreshElements();
this.searchForm.submit(this.proxy(this.search));
},
search: function(){
alert('Searching:' + this.searchInput.val());
return false;
},
$: function(selector){
return $(selector, this.el);
},
refreshElements: function(){
for(var key in this.elements){
this[this.elements[key]] = this.$(key);
};
}
});
new SearchView('#users');
});
<div id="users">
<form>
<input type="search" value="" placeholder="Enter a query">
<button>Search</button>
</form>
</div>
External resources loaded into this fiddle: