Backbone.js получает целевой атрибут

Question

Я пытаюсь понять, почему значение e.target.getAttribute ('data-text') становится равным нулю, когда я перехожу из своего HTML в свой JS-файл Backbone.

HTML:

<script type="text/template" id="lesson-template"> 
    <span id="lesson-title"><%= tracks[0].title %></span> 
    <select class="sel"> 

    <% _.each(tracks, function(track) { %> 
     <option value = "<%= track.text %>" data-text="<%= track.title %>"><%= track.title %></option> 
     <% }); %> 
    </select> 
    <p id="tracktext"><%= tracks[0].text %></p> 

</script> 

JS:

window.LibraryLessonView = LessonView.extend({ 
events: { 
    "change .sel " : "changeText" 
}, 

changeText: function(e) { 
alert(e.target.getAttribute('data-text')); //I am getting a null value here! 
document.getElementById("lesson-title").innerHTML= e.target.getAttribute('data-text'); //I am getting a null value here as well 
document.getElementById("tracktext").innerHTML= e.target.value; 

} 

Любое разъяснение или помощь будет оценена !!

Answer 1

Событие изменения уволят на <select>, а не на <option>, но ваши данные атрибуты находятся на <option> с. Вы можете проскочить через $(e.currentTarget) (<select>), чтобы найти подходящий <option>, а затем извлечь из него атрибуты данных или использовать то, что у вас уже есть.

я бы что-то вроде этого в шаблоне:

<select class="sel"> 
    <% _.each(tracks, function(track) { %> 
     <option value="<%= track.id %>"><%= track.title %></option> 
    <% }); %> 
</select> 

Нет данных атрибутов на всех, только уникальный идентификатор трека в качестве значения <option> «s. Тогда, когда событие изменения срабатывает, вы можете захватить трек ID с:

var id = $(e.currentTarget).val(); // or $(e.target).val() but currentTarget is a bit safer 

Вы должны иметь список дорожек, прикрепленный к вашему мнению, как this.collection, так что теперь вы можете использовать get, чтобы захватить модель из коллекции:

var track = this.collection.get(id); 

Если вы не id с на вашей модели, то вы можете использовать cids что Backbone будет создавать или что-то другое, что является уникальным и findWhere вместо get.

Теперь, когда у вас есть track модели в руках, вы можете вытащить нужные значения в обычном порядке:

this.$('#lesson-title').html(track.get('title')); 
this.$('#tracktext').html(track.get('text')); 

Обратите внимание, что я переключатель this.$, это функция просмотра Backbone, который эквивалент this.$el.find, локализация ваших селекторов на ваш взгляд - хорошая привычка.

Демо: http://jsfiddle.net/ambiguous/Jas6c/

Answer 2

Вам нужно обернуть jQuery arround, чтобы получить цель.

$(e.target).attr('data-text');