пользовательские привязки div с помощью нокаута js

Question

Я использую нокаут js jplayer по этой ссылке «https://github.com/scommisso/knockout-jplayer», его работа прекрасна, но когда у меня есть несколько звуковых url, все связывает внутри одного и того же div, а не связывается с другим div

 //Html foreach binding// 
<div data-role="content" style="background-color: #fff !important;" data- bind="foreach:AudioList"> 
<div data-bind="jplayer: {media: { mp3: ogg } }"> 
</div> 

    //Creating ViewModel 
function ViewModel() { 
var self = this; 
self.AudioList= ko.observableArray([]); 

var sampleData = [{ ogg: "http://www.jplayer.org/audio/ogg/Miaow-04- Lismore1.ogg" }, 
    { ogg: "http://www.jplayer.org/audio/ogg/Miaow-04-Lismore2.ogg" }, 
    { ogg: "http://www.jplayer.org/audio/ogg/Miaow-04-Lismore3.ogg" } 
]; 
self.AudioList($.map(sampleData, function (item) { 
    return new AudioListViewModel(item); 
})); 

function AudioListViewModel(data) { 
var self = this; 
self.ogg = ko.observable(data.ogg); 
} 
ko.applyBindings(new ViewModel()); 

    //The output which we are currently getting// 

    <div data-role="content" style="background-color: #fff !important;" data- bind="foreach:AudioList"> 
    <div data-bind="jplayer: {media: { mp3: ogg } }"> 
    <div id="jplayer1"><audio url="http://www.jplayer.org/audio/ogg/Miaow-04- Lismore1.ogg""></audio></div> 
<div id="jplayer2"><audio url="http://www.jplayer.org/audio/ogg/Miaow-04- Lismore2.ogg""></audio></div> 
<div id="jplayer3"><audio url="http://www.jplayer.org/audio/ogg/Miaow-04- Lismore3.ogg""></audio></div> 
    </div> 

    //Expected output// 

<div data-role="content" style="background-color: #fff !important;" data- bind="foreach:AudioList"> 
<div data-bind="jplayer: {media: { mp3: ogg } }"> 
<div id="jplayer1"><audio url="http://www.jplayer.org/audio/ogg/Miaow-04- Lismore1.ogg""></audio></div> 
</div> 

    <div data-role="content" style="background-color: #fff !important;" data- bind="foreach:AudioList"> 
<div data-bind="jplayer: {media: { mp3: ogg } }"> 
<div id="jplayer2"><audio url="http://www.jplayer.org/audio/ogg/Miaow-04- Lismore2.ogg""></audio></div> 
</div> 

<div data-role="content" style="background-color: #fff !important;" data- bind="foreach:AudioList"> 
<div data-bind="jplayer: {media: { mp3: ogg } }"> 
<div id="jplayer3"><audio url="http://www.jplayer.org/audio/ogg/Miaow-04- Lismore3.ogg""></audio></div> 
</div> 

Answer 1

Попробуйте изменить HTML для этого -

<div data- bind="foreach:AudioList"> 
    <div data-role="content" style="background-color: #fff !important;"></div> 
    <div data-bind="jplayer: {media: { mp3: ogg } }"></div> 
</div> 

Вы, возможно, потребуется сделать некоторые изменения, связанные с CSS ..