javascript - Backbonejs - 查看自定义 HTML 属性?

标签 javascript html events audio backbone.js

我想向 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/

相关文章:

javascript - 在点击叠加层时更改叠加层中图像的不透明度

javascript - 如何使用 AngularJS 从 NodeJS 获取 "get"

javascript - Angularjs - 过滤到文本框后我的折叠和展开不起作用

javascript - 在 JavaScript 中将数组元素打印到各自的列中

jquery 淡出事件监听器

javascript - 使用向上/向下键导航焦点

javascript - 在 NodeJs 中从客户端调用服务器端函数

c# - 在不剥离标签的情况下获取 HTML 内容的前 100 个字符

javascript - Socket.IO - 如何替换客户端上的事件监听器

javascript 在处理程序中删除事件,