Prototype Pattern, используя 'this' в функции jQuery $ .each

Question

Я хочу создать <select> через XML-данные в моем object. Я хочу использовать шаблон Prototype для всего этого, и я должен признать, что я очень новичок в Patterns. Вот что у меня есть:

HTML Пример:

<select id="ddFullName" name="Full_Name" ></select> 

XML пример:

<names> 
    <nameDetails name="Name 01" phone="555-867-5309" email="none@nothing.no" /> 
    <nameDetails name="Name 02" phone="555-867-5309" email="none@nothing.no" /> 
    <nameDetails name="Name 03" phone="555-867-5309" email="none@nothing.no" /> 
    <nameDetails name="Name 04" phone="555-867-5309" email="none@nothing.no" /> 
    <nameDetails name="Name 05" phone="555-867-5309" email="none@nothing.no" /> 
</names> 

JavaScript Пример:

function buildNameDropdown(data, elem) { 
    this.data = data; 
    this.name = $(data).find('nameDetails'); 
    this.elem = elem; 

    buildNameDropdown.prototype.init = function() 
    { 
     //Working as desired 
     $(this.elem).append($('<option value=""> ----- Select a Name ----- </option>')); 
     //Not working 
     $(this.name).each(function() 
     { 
      //$(this) = the object, not 'this.name' 
      $(this.elem).append($('<option value="' + $(this).attr('name') + '">' + $(this).attr('name') + '</option>')); 

     }); 
     $(this.elem).combobox(); // from jQuery UI combobox extension 
    }; 
}; 


var myNameDropdown = new buildNameDropdown(data, "#ddFullName"); 
myNameDropdown.init(); 

Как я могу ссылаться на «это» как на селектор для каждой функции?

Answer 1

Скопируйте ссылку this на локальную переменную. Таким образом, он будет доступен при закрытии функции обратного вызова.

(Side Примечание: Вы не должны устанавливать прототип внутри конструктора, таким образом, вы бы переназначить его для каждого экземпляра, который вы создаете.)

function buildNameDropdown(data, elem) { 
    this.data = data; 
    this.name = $(data).find('nameDetails'); 
    this.elem = elem; 
}; 

buildNameDropdown.prototype.init = function() { 
    $(this.elem).append($('<option value=""> ----- Select a Name ----- </option>')); 
    var t = this;  
    $(this.name).each(function() { 
    $(t.elem).append($('<option value="' + $(this).attr('name') + '">' + $(this).attr('name') + '</option>')); 
    }); 
    $(this.elem).combobox(); // from jQuery UI combobox extention 
};