[英]Adding a function to one jQuery/DOM element
I am authoring a plugin which instantiates a map. 我正在创作一个实例化地图的插件。 The map would then provide a function to move to another place on the earth. 然后地图将提供移动到地球上另一个地方的功能。
The script makes the map just fine. 该脚本使地图很好。 However I can't "tack" the function on the element, to be used by another plugin in a callback. 但是,我不能“修复”元素上的函数,以供回调中的另一个插件使用。
Here's the approach I tried; 这是我尝试过的方法; in plugin: 在插件中:
(function($){
$.fn.mapDo(options){
map = new BlahMap(this.get(0));
this.moveTheMap = function(place){
map.moveItToThat(place);
}; // nope.
}
})(jQuery);
Then, in view: 然后,在视图中:
$(map).mapDo();
$(otherElement).otherControl({
callback: function(place){
$(map).moveTheMap(place); // moveTheMap is not there on $(map)!
}
};
How do I add a function to the map jQuery or DOM element, if possible? 如果可能,如何向地图jQuery或DOM元素添加函数? If not, how can I provide that kind of functionality? 如果没有,我该如何提供这种功能?
More importantly, am I going the right way here by separating the things that way? 更重要的是,我是否通过这种方式将事情分开? I'm a bit of a neophyte to Javascript, how are these tasks usually done while still keeping the components apart? 我有点像Javascript的初学者,这些任务通常是如何在保持组件分开的同时完成的?
While that's the stab I took at it, more generally, I struggled with the concept of outputting things from a jQuery plugin while maintaining chainability. 虽然这是我对它的抨击,但更普遍的是,我在保持可链接性的同时,努力解决从jQuery插件输出内容的问题。 In this case, what I am trying to do is to output a callback from the plugin that will work on the called element later in the execution. 在这种情况下,我想要做的是从插件中输出一个回调,该回调将在执行后期对被调用元素起作用。
You could store the map
with .data
method. 您可以使用.data
方法存储map
。
(function($){
$.fn.mapDo = funciont(options) {
this.data('map', new BlahMap(this.get(0)));
return this;
};
$.fn.moveTheMap = function(place) {
var map = this.data('map');
if (map) {
map.moveItToThat(place);
}
return this;
};
})(jQuery);
Plugins normally only add one method to the jQuery prototype, and the method calls to the plugin's instances are done with strings. 插件通常只向jQuery原型添加一个方法,并且对插件的实例的方法调用是使用字符串完成的。
(function($) {
$.fn.mapDo = function(options) {
var args = [].slice.call(arguments, 1); //Get all the arguments starting from 2nd argument as an array
return this.each(function() {
var $this = $(this),
instance = $this.data("map-instance");
if (!instance) {
$this.data("map-instance", (instance = new BlahMap(this, options)));
}
if (typeof options == "string") {
instance[options].apply(instance, args);
}
});
};
})(jQuery);
$(elem).mapDo( "moveTheMap", place ); //This would also instantiate the plugin if it wasn't instantiated
Here's jsfiddle showing it in action: 这是jsfiddle显示它的实际效果:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.