jquery 플러그인의 옵션을 업데이트하는 메소드를 구현하는 방법은 무엇입니까?

Question

특정 기본 설정을 업데이트하는 메소드를 추가하기 위해 jquery 플러그인 (https://raw.github.com/loopj/jquery-tokeninput/master/src/jquery.tokeninput.js)을 조정하려고합니다. hintText).

이미 제공하는 몇 가지 방법이 있습니다 :

var methods = { 
    init: function(url_or_data_or_function, options) { 
     var settings = $.extend({}, DEFAULT_SETTINGS, options || {}); 

     return this.each(function() { 
      $(this).data("tokenInputObject", new $.TokenList(this, url_or_data_or_function, settings)); 
     }); 
    }, 
    clear: function() { 
     this.data("tokenInputObject").clear(); 
     return this; 
    }, 
    add: function(item) { 
     this.data("tokenInputObject").add(item); 
     return this; 
    }, 
    remove: function(item) { 
     this.data("tokenInputObject").remove(item); 
     return this; 
    }, 
    get: function() { 
     return this.data("tokenInputObject").getTokens(); 
    } 
} 

그리고 나는 이것을 추가 :

updateHintText: function (hintText) { 
    DEFAULT_SETTINGS.hintText = hintText; 
} 

이 그것을 업데이트 않습니다,하지만, 그것은 이미 생성 된 인스턴스에서 작동하지 않습니다. 예를 들어,이 같은이 메서드를 호출 :

$("#textbox1").tokenInput("updateHintText", 'updated hint'); 

을하지만 힌트 드롭 다운은 다음 번에 표시 될 때, 그것은 여전히 ​​원래의 힌트를 보여줍니다 그래서

function show_dropdown_hint() { 
    if(settings.hintText) { 
     dropdown.html("<p>"+settings.hintText+"</p>"); 
     show_dropdown(); 
    } 
} 

DEFAULT_SETTINGS.hintText 업데이트됩니다에도 불구을 , settings.hintText는 여전히 플러그인을 인스턴스화 할 때 전달 된 원래 설정을 참조합니다. 이는 의미가 있습니다.

그렇다면 settings.hintText에서 새 설정을 반환하도록 내 updateHintText() 메서드를 어떻게 변경하겠습니까? 지금 당장 해결 방법은 새 설정 값을 보유 할 새 변수를 작성하고 show_dropdown_hint() 메소드가 비어 있지 않은 경우 settings.hintText 대신이 새 변수를 사용하도록 수정했습니다. 하지만 설정 개체를 사용하는 것을 선호합니다.

감사합니다.

Answer 1

init 함수에서이 줄에서 확장 된 실제 설정 해시가 아니라 기본 설정에 연결하기 때문에 이러한 것처럼 보입니다.

var settings = $.extend({}, DEFAULT_SETTINGS, options || {}); 

이 설정 해시는 메서드 범위 밖에 있으므로 액세스 할 수 없습니다.

init 메소드 외부에서 설정 인스턴스화를 시도하고 액세스 할 수 있도록하십시오. 그런 다음 함수를 사용하여 수정할 수 있습니다.

// Additional public (exposed) methods 
var settings = {}; 
var methods = { 
init: function(url_or_data_or_function, options) { 
    settings = $.extend({}, DEFAULT_SETTINGS, options || {}); 

    return this.each(function() { 
     $(this).data("tokenInputObject", new $.TokenList(this, url_or_data_or_function, settings)); 
    }); 
}, 
updateHintText: function (hintText) { 
    settings.hintText = hintText; 
} 
//..other methods...