Question

我正在使用此链接中的淘汰赛js jplayer＆＃34; https://github.com/scommisso/knockout-jplayer＆＃34;，它的工作正常，但是当我有多个音频网址时，所有内容都绑定在同一个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相关的更改..

自定义绑定div使用Knockout js

1 个答案: