0

我试图弄清楚为什么当我从 HTML 转到我的 Backbone JS 文件时 e.target.getAttribute('data-text') 的值变为空。

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;

}

任何澄清或帮助将不胜感激！

4

2 回答 2

1

change 事件将在 s 上触发<select>，而不是在 s 上<option>，但您的数据属性在<option>s 上。您可以挖掘$(e.currentTarget)(the <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);

如果您的模型上没有ids，那么您可以使用 Backbone 将创建的cids或其他独特的东西，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/

于 2013-10-06T23:06:18.883 回答
0

您需要包装 jQuery arround 以获取目标。

$(e.target).attr('data-text');
于 2013-10-06T21:55:34.413 回答