Question

我想弄清楚为什么当我从HTML转到Backbone JS文件时，e.target.getAttribute（'data-text'）的值变为null。

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>的值。然后，当触发更改事件时，您可以使用以下命令获取轨道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，那么您可以使用Backbone将创建的cids或其他独特的内容findWhere代替get }。

现在您拥有track模型，您可以通常的方式提取所需的值：

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

请注意，我已切换到this.$，这是一个相当于this.$el.find的Backbone视图功能，将您的选择器本地化到您的视图是一个好习惯。

演示：http://jsfiddle.net/ambiguous/Jas6c/

Answer 2

你需要包装jQuery arround以获得目标。

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

Backbone.js获取目标属性

2 个答案: