I'm wanting to know how to create my own custom events for my plugin and how to fire the event. My addItem function works but I don't know how to make my own custom event to work does anyone know?
$('#TreeView').Web().DropDownList().onload(function () {
alert('loaded function event');
}).click(function () {
$(this).addItem('Hello World');
});
$.fn.Web = function () {
var $this = this;
return {
TreeView: function () {
return $this.each(function () {
alert('TreeViewControl');
})
},
DropDownList: function () {
var methods = {
addItem: function () {
alert('AddItem');
}, removeItem: function () {
alert('removeItem');
}
}
return $this.each(function () {
//methods.addItem.apply(this, arguments);
for (var method in methods) {
methods[method].apply(this, arguments);
}
return this;
})
}
}
};
Related
I am trying to get the name of the parent function of the function being called.
For example if I have these functions:
var functions = {
coolfunction1: {
add: function () {
},
delete: function () {
},
save: function () {
}
},
coolfunction2: {
add: function () {
// i want to console.log() the name of the parent of this function,
// output: coolfunction2
},
delete: function () {
},
save: function () {
}
}
}
When I call functions.coolfunction2.add(), is there a way to log the name of the parent function that was run?
I know I can use the variable this but that only outputs the names of the children functions, add(), delete(), save().
How can I know that the coolfuntion2 was run?
I know this can be done manually, by rewriting the function name in the add() function, but is there a way to get the name dynamically?
You can add a getter to those methods as
Object.keys(functions).forEach(t =>
Object.keys(functions[t]).forEach(t2 => {
var func = functions[t][t2]; //save a reference to function since it won't be a function anymore once a getter is assigned
Object.defineProperty(functions[t], t2, {
get: function() {
console.log(t); //print the name of parent property or grand-parent property, etc
//func();
return func; //return the reference to this function
}
});
})
);
Demo
var functions = {
coolfunction1: {
add: function() {
},
delete: function() {
},
save: function() {
}
},
coolfunction2: {
add: function() {
console.log("a is invoked");
},
delete: function() {
},
save: function() {
}
}
};
Object.keys(functions).forEach(t =>
Object.keys(functions[t]).forEach(t2 => {
var func = functions[t][t2];
Object.defineProperty(functions[t], t2, {
get: function() {
console.log(t);
//func();
return func;
}
});
})
);
functions.coolfunction2.add();
functions.coolfunction2.add();
functions.coolfunction1.add();
Let's say I have the following methods:
Controller.prototype.refresh = function () {
console.log('refreshing');
}
Controller.prototype.delete = function (object) {
var self = this;
object.delete({id: object.id}, function () {
self.refresh();
});
}
now in my (mocha) test:
beforeEach(function () {
var controller = new Controller();
var proto = controller.__proto__;
var object = {id: 1, delete: function (options, callback) { callback (); };
sinon.stub(proto, 'refresh', function {console.log('refreshing stub')});
controller.delete(object);
});
it('doesnt work', function () {
expect(object.delete.callCount).to.equal(1);
expect(proto.refresh.callCount).to.equal(1);
});
This, however, prints "refreshing" to the console. Is there a way to use sinon to stub a live prototype?
This is how I would do it:
describe('test', function() {
before(function() {
// stub the prototype's `refresh` method
sinon.stub(Controller.prototype, 'refresh');
this.object = {
id: 1,
delete: function (options, callback) { callback (); }
};
// spy on the object's `delete` method
sinon.spy(this.object, 'delete');
});
beforeEach(function () {
// do your thing ...
this.controller = new Controller();
this.controller.delete(this.object);
});
after(function() {
// restore stubs/spies after I'm done
Controller.prototype.refresh.restore();
this.object.delete.restore();
});
it('doesnt work', function () {
expect(this.object.delete.callCount).to.equal(1);
expect(this.controller.refresh.callCount).to.equal(1);
});
});
I have the following javascript code using http://fr.jqueryboilerplate.com/
;(function ($, window, document, undefined) {
var pluginName = "PluginName",
defaults = {
overlay: {
BgColor: "#000",
opacity: "0.6"
}
};
function Plugin(element, options) {
this.element = $(element);
this.options = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype = {
init: function () {
console.log("init");
var overlay = jQuery("<div/>", {
id: "ModalOverlay",
click: function () {
Plugin.prototype.Mymethod();
}
});
},
Mymethod: function () {}
};
Anyone could teach me how can access to variables, whose are into
function Plugin(){}
from
Mymethod: function() {}
maybe something like that :
add store object
Plugin.prototype = {
store: {
_overlay: null
}
Into init function
Plugin.prototype.store._overlay = overlay;
And then access it like :
Mymethod: function () {
console.log(Plugin.prototype.store._overlay);
},
I'm pretty sure that's work, but i think that's very dirty.
Try this code, I have not tested it. but worth try . If does not work let me know and i will delete.
Plugin.prototype = {
init: function () {
var myThis=this;
console.log("init");
var overlay = jQuery("<div/>", {
id: "ModalOverlay",
click: function () {
myThis.Mymethod();
}
});
},
Mymethod: function () {
alert(this._name);
alert(this.options);
alert(this.options.overlay);
console.log(this.options.overlay);
}
};
I want to do something like $.ajax() success and error callbacks.
This is what I have so far:
var FileManager = {
LoadRequiredFiles: function (onLoadingCallback, onCompleteCallback) {
//Not sure what to do here
this.OnLoading = onLoadingCallback;
this.OnCompleteCallback = onCompleteCallback;
this.OnLoading();
this.OnComplete();
},
OnLoading: function () {
//empty by default
}
OnComplete: function () {
//empty by default
}
};
//I want to do something like this:
FileManager.LoadRequiredFiles({OnLoading: function() {
alert('loading');
}
});
How do I fix this up properly? I'm using FileManager as my namespace.
You can check if the functions are defined:
var FileManager = {
LoadRequiredFiles: function (config) {
config = config || {};
this.OnLoading = config.onLoadingCallback;
this.OnCompleteCallback = config.onCompleteCallback;
if(typeof this.OnLoading =='function') {
this.OnLoading();
}
//Or use the shortcut:
if(this.OnComplete) {
this.OnComplete();
}
}
};
FileManager.LoadRequiredFiles(
{
onLoadingCallback: function() {
alert('loading');
}
}
);
How can I make my tabs variable private and only accessible from within the return {}... console.log(tabs) returns undefined...
$(document).ready(function () {
Site.page = (function () {
return {
init: function () {
Site.page.tabs.init();
},
//manage deal tabs
tabs: (function () {
var tabs = null;
return {
init: function () {
console.log(tabs);
},
show: function (tab) {
$('#deal-tabs > div.selected').removeClass('selected');
$(tab).addClass('selected');
}
}
})()
}
}());
Site.page.init();
});
Why did you name both the function and the variable the same name? If you only need the variable in return{} then declare it in that block of code, not outside.