Backbone.js获取目标属性

我想弄清楚为什么e.target.getAttribute（'data-text'）的值在我从我的HTML到我的Backbone JS文件时变为null。Backbone.js获取目标属性

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; 

}

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

来源

2013-10-06 Robs

更改事件将在<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当时的你可以使用cids是骨干将创造或别的东西，是独特的findWhere而不是get。

现在你已经在手track模型，你可以拉出你想要的值以通常的方式：

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

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

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

来源

2013-10-06 23:06:18

使用你的JavaScript代码，如果我要说var Tracks = Backbone.Collection.extend（{model：Track，url：链接到一些JSON文件}）;我正在用这种方式创建曲目集合。我将如何处理该行var v = new LibraryLessonView（{collection：tracks}）;？ – Robs

@Robs：我不确定你在问什么。你需要'var tracks = new Tracks'来创建一个集合实例，然后'tracks.fetch（）'来加载数据。 –

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

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

来源

2013-10-06 21:55:34 Bernhard

这还通过空对我来说一些原因。 – Robs

Backbone.js获取目标属性

回答

相关问题