我有一个基本的jQuery插件定义如下:
(function( $ ){
var new_row_num = 0;
// Test data for now
var courses = [
{
course_num: "M118",
title: "Finite Math"
},
{
course_num: "M119",
title: "Calculus"
}
];
// constructs the suggestion engine
var courseSuggestions = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('course_num'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: courses
});
var methods = {
init : function(options) {
},
add : function( ) {
// Adds a new row to my table
}
};
$.fn.studentCourseBox = function(methodOrOptions) {
if ( methods[methodOrOptions] ) {
return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
// Default to "init"
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + methodOrOptions + ' does not exist on jQuery.studentCourseBox' );
}
};
})( jQuery );
这个想法是每次我使用这个插件添加一个新行:
$('#myWidget').studentCourseBox('add')
,
它会自动初始化其中一列中的Typeahead字段。不幸的是,我收到一个Javascript错误" ReferenceError:没有定义Bloodhound"在第一次提到Bloodhound时。
但是,如果我将courses
和courseSuggestions
的变量初始化移到插件之外,并通过init
方法传递它们,它就可以正常工作。所以,我知道Bloodhound在我的脚本中工作,它只是在我的插件中工作。
我做错了什么?我觉得这是一个范围问题,但我已经尝试$.Bloodhound
,$.fn.Bloodhound
等等,但没有任何作用。
答案 0 :(得分:0)
我的Javascript包含错误的顺序。在此代码后,我有Bloodhound
加载的JS资源,因此我的浏览器必须在定义courseSuggestions
之前尝试实例化Bloodhound
。但不确定为什么它在插件外部实例化时才有效。