我想向 View 添加自定义 HTML 属性,以便在渲染 View 时显示该属性。这是我的代码:
var Song = Backbone.Model.extend({
defaults: {
title: 'Red',
artist: 'Taylor Swift',
filename: 'audio1.mp3',
playlist: 0
}
});
var Player = Backbone.View.extend({
tagName: "audio",
id: "player",
//Can I add a custom HTML attr here? eg. onended="view.next()"
newTemplate: _.template('<source src="<%= filename %>" >'),
initialize: function(){
this.render();
},
render: function(){
var track = this.model.currentTrack
var currentModel = _.find(this.model.models, function(arr){return arr.attributes.playlist == track});
this.$el.html(this.newTemplate(currentModel.toJSON()));
$(document.body).html(this.el);
},
next: function(){
this.model.currentTrack++;
console.log('currentTrack: ', this.model.currentTrack);
this.render();
}
});
var Playlist = Backbone.Collection.extend({
model: Song,
initialize: function(models,options) {
_.extend(this,_.pick(options, 'currentTrack'));
}
});
var playlist = new Playlist([
{
title: 'Red',
artist: 'Taylor Swift',
filename: 'audio1.mp3',
playlist: 1
},
{
title: 'Style',
artist: 'Taylor Swift',
filename: 'audio2.mp3',
playlist: 2
}
],
{
currentTrack: 1
});
所以,基本上我想向渲染的 View (<audio onended="view.next()">
)添加一个HTML监听器,这样当音频播放完毕时我可以触发next
View 的方法。我怎样才能做到这一点?
我更愿意使用 Backbone 事件来执行此操作,但根据 this answer我必须从 HTML 元素触发事件。
最佳答案
事实证明我的想法完全错误,而且答案非常简单。
我只需像对待其他事件一样对待它......
var Player = Backbone.View.extend({
tagName: "audio",
id: "player",
//I add an events attribute with the event and the method to trigger.
events: {
'ended': 'next'
},
newTemplate: _.template('<source src="<%= filename %>" >'),
initialize: function(){
this.render();
},
感谢mu is too short请注意。他还提到查看delegate events
关于javascript - Backbonejs - 查看自定义 HTML 属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44608493/