我正在尝试根据this-one boilerplate
创建一个插件然而我被卡住了。这是我的代码。
(function ($, window, document, undefined) {
var pluginName = 'ReservationTableJQPlugin';
function Plugin(element, options) {
// Store a reference to the source element
this.container = element;
this.$container = $(element);
this.options = $.extend({}, $.fn[pluginName].defaults, options);
this.init();
}
Plugin.prototype = {
init: function () {
this.$htmlbtn = '' +
'<button class="btn btn-danger btn-xs btnPrevWeek"> Geri</button> ' +
'<button class="btn btn-danger btn-xs btnTodayWeek">Bugun</button>' +
' <button class="btn btn-danger btn-xs btnNextWeek">Ileri</button>';
this.$container.append(this.$htmlbtn).append(this._renderTable());
this.$tbody = this.$container.find('table').addClass("table-bordered table-responsive table-condensed");
this.$btnMenus = $('.btnMenu');
this.$btnNextClickEvent = $('.btnNextWeek');
//I am binding all clcick events here
this._btnClickEvents(this.$tbody,this._appendTable());
},
destroy: function () {
// Remove any attached data from your plugin
this.$container.empty();
this.$container.removeData();
this.$btnNextClickEvent.off('.' + pluginName);
this.$btnMenus.off('.' + pluginName);
},
_appendTable :function() {
this.$tbody.append(this._renderTable());
},
_renderTable: function () {
return (this._renderHeader() + this._renderContent());
},
_renderContent: function () {
},
_renderHeader: function () {
},
_getData: function () {
},
_btnClickEvents: function (that,fnc) {
var fncx = fnc;
this.$btnMenus.on('click.' + pluginName, function () {
alert('working');
});
this.$btnNextClickEvent.on('click.' + pluginName,"button", function () {
that.empty();
fncx();
//here givea me error,saying this__renderTable not found.
//also that.empty(); functon not clear html element
});
}
};
$.fn[pluginName] = function (options) {
var args = arguments;
if (options === undefined || typeof options === 'object') {
// Creates a new plugin instance, for each selected element, and
// stores a reference withint the element's data
return this.each(function () {
if (!$.data(this, 'plugin_' + pluginName)) {
$.data(this, 'plugin_' + pluginName, new Plugin(this, options));
}
});
} else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
// Call a public pluguin method (not starting with an underscore) for each
// selected element.
if (Array.prototype.slice.call(args, 1).length == 0 && $.inArray(options, $.fn[pluginName].getters) != -1) {
// If the user does not pass any arguments and the method allows to
// work as a getter then break the chainability so we can return a value
// instead the element reference.
var instance = $.data(this[0], 'plugin_' + pluginName);
return instance[options].apply(instance, Array.prototype.slice.call(args, 1));
} else {
// Invoke the speficied method on each selected element
return this.each(function () {
var instance = $.data(this, 'plugin_' + pluginName);
if (instance instanceof Plugin && typeof instance[options] === 'function') {
instance[options].apply(instance, Array.prototype.slice.call(args, 1));
}
});
}
}
};
/**
* Default options
*/
$.fn[pluginName].defaults = {
defaultOption: "I'm a default option",
url: "ReservationPage/Index",
searchId: 5,
startHour: 6,
weeks: [],
tableCss: {}
};
})(jQuery, window, document);
我的问题就像内部代码中提到的那样，this.$btnNextClickEvent无法正常工作并且给了我错误＆＃34; this._renderTable not found＆＃34;。
只有我想做的是，当btnNextClick按钮清除表中的所有html并将新数据添加到表中时。