javascript - 创建 js 小部件时,如何获取我的小部件的实例?
问题描述
我正在尝试以 DevExtreme 的方式实现 widgits。
当他们创建一个文本框widgit时,代码如下:
$("#someContainer").dxTextBox({ options... });
当他们获得widgit的一个实例时,他们会这样做......
$("#someContainer").dxTextBox("instance");
到目前为止,这是我的小部件代码...
(function ($) {
'use strict';
$.myWidget = function (element, options) {
var plugin = this;
var $base = $(element);
var defaultOptions = {
id: null,
};
var opts = $.extend({}, defaultOptions, options);
var me = new function () {
var self = this;
var init = {
widgets: function () {
// Do some stuff
},
};
return {
init: init,
};
};
me.init.widgets();
};
$.fn.myWidget = function (options) {
return this.each(function () {
if (undefined === $(this).data('myWidget')) {
var plugin = new $.myWidget(this, options);
$(this).data('myWidget', plugin);
}
});
};
})(jQuery)
有了这个,我可以创建一个像这样的小部件......
$("#someContainer").myWidget({ id: 1 });
但我希望能够获得小部件的一个实例,所以我可以做这样的事情:
$("#someContainer").myWidget("instance").showPopup();
并且:
var w = $("#someContainer").myWidget({ options... }).myWidget("instance");
w.showPopup();
如何获取实例?
解决方案
您必须检测请求实例时的“特殊呼叫”。这里有一个小例子:
(function ($) {
'use strict';
$.myWidget = function (element, options) {
var plugin = this;
var $base = $(element);
var defaultOptions = {
id: null,
};
var opts = $.extend({}, defaultOptions, options);
var me = new function () {
var self = this;
var init = {
widgets: function () {
return {
hello: function(){
alert("it's me!");
}
}
},
};
return {
init: init,
};
};
return me.init.widgets();
};
$.fn.myWidget = function (options) {
if(options === "instance"){
return $(this).data('myWidget');
}
return this.each(function () {
if (undefined === $(this).data('myWidget')) {
var plugin = new $.myWidget(this, options);
$(this).data('myWidget', plugin);
}
});
};
})(jQuery)
$("#someContainer").myWidget({ id: 1 });
$("#someContainer").myWidget("instance").hello()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="someContainer"></div>
推荐阅读
- bash - 如何从 bash 中的多行字符串中额外增加前 n 行(sed/awk/??)
- google-calendar-api - Google 日历是否需要您单击电子邮件中的“添加此日历”,从而改变了将共享日历添加到您帐户的方式?
- wpf - VB.NET - Instagram 网站未在 Web 浏览器控件上打开
- authentication - Microsoft Bot Framework 团队身份验证
- java - Spring Webflux 如何将响应模拟为 WebClient Junit 的 Mono.error
- core-data - 在 SwiftUI 中更新 CoreData 时更新状态变量
- javascript - 在 React Js 中使用 Express 进行代理 Api 调用
- python - Tkinter 从 curl 命令返回 0
- r - 从列表中提取 ARIMA 对象并存储在 R 中的数据框中
- php - 我想将图像从 nativescript 应用程序上传到 https apache 服务器