javascript - BackboneJS 如何添加JPlayer

Question

我正在尝试添加 Jquery Jplayer http://jplayer.org到我的 Backbone 应用程序，但无法运行它。我将脚本设置到 RequireJS 配置文件中，控制台告诉我脚本已加载。所以我设置了一个 View 来测试它，如下所示:

define([

'app',
'backbone',
'audioplayer'

],

function (App, Backbone, audioplayer) {

    var audioplayer = App.module();

    var audioplayer = Backbone.View.extend({
        template: 'audioplayer',
        initialize: function() {
            var self = this;
            $("#jquery_jplayer_1").jPlayer({
                ready: function(event) {
                    $(this).jPlayer("setMedia", {
                        title: "Cro Magnon Man",
                        mp3: "http://jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
                        oga: "http://jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
                    });
                },
                swfPath: "http://jplayer.org/latest/js",
                supplied: "mp3, oga"
            });          
        }
    });

    return audioplayer;
}
);

和我的 HTML 模板:

<div id="jquery_jplayer_1" class="jp-jplayer"></div>

<div id="jp_container_1" class="jp-audio">
   <div class="jp-type-single">
    <div class="jp-gui jp-interface">
        <ul class="jp-controls">

            <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
            <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
            <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
            <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
            <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
            <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
        </ul>

        <div class="jp-progress">
            <div class="jp-seek-bar">
                <div class="jp-play-bar"></div>
            </div>
        </div>
        <div class="jp-volume-bar">
            <div class="jp-volume-bar-value"></div>
        </div>
        <div class="jp-current-time"></div>
        <div class="jp-duration"></div>                   
    </div>
    <div class="jp-details">
        <ul>
            <li><span class="jp-title"></span></li>
        </ul>
    </div>
  </div>
</div>

我所看到的只是我 View 中的 html，但我无法播放该轨道

我做错了什么？

Answer 1

所以问题是你正在尝试使用不存在的 DOM 来初始化播放器。这里有一条规则，任何 Jquery 插件都应该在 BB 或 Marionette View 渲染之后启动。

因此，在您的情况下，您必须在 View render之后移动$("#jquery_jplayer_1").jPlayer({})，例如

render: function() {
    .... some render logic ....
    $("#jquery_jplayer_1").jPlayer({...})
}