Question

我有一个基本的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错误＆＃34; ReferenceError：没有定义Bloodhound＆＃34;在第一次提到Bloodhound时。

但是，如果我将courses和courseSuggestions的变量初始化移到插件之外，并通过init方法传递它们，它就可以正常工作。所以，我知道Bloodhound在我的脚本中工作，它只是在我的插件中工作。

我做错了什么？我觉得这是一个范围问题，但我已经尝试$.Bloodhound，$.fn.Bloodhound等等，但没有任何作用。

Answer 1

我的Javascript包含错误的顺序。在此代码后，我有Bloodhound加载的JS资源，因此我的浏览器必须在定义courseSuggestions之前尝试实例化Bloodhound。但不确定为什么它在插件外部实例化时才有效。

在jQuery插件中使用Typeahead Bloodhound

1 个答案: