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獲取目標屬性

回答

相關問題