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>

我所得到的只是视图中的html，但我无法播放曲目

我究竟做错了什么？

Answer 1

因此，问题是您正在尝试使用不存在的DOM初始化播放器。 这是任何BB或Marionette View渲染后都应启动的Jquery插件的规则。

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

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