如果MediaElement JS位于Knockout JS中的每个循环中，则它不会为我的音频标记设置样式。

Question

嗨，我用的是Knockout JS和MediaElement JS。

MediaElement JS只是一个用于样式/定制我的音频播放器(HTML5)的插件。

下面是foreach循环中的音频片段：

<tbody data-bind="foreach: tracks">
    <tr class="search-track" data-bind="attr: { id: 'search-track-' + $index() + '' }">
       <td class="search-title-col" data-bind="attr: { id: 'search-col-' + $index() + '' }">

         <div class="audio-player">
        <h2>The Good Lawdz - Evidence Song</h2>
        <audio id="audio-player" src="media/evidence-song.mp3" type="audio/mp3" controls="controls"></audio>
         </div><!-- @end .audio-player -->

        </td>
     </tr>
 </tbody>

这里是我的JS位于html文件中，在body标记中：

    <script type="text/javascript">
        $(function(){
            $('#audio-player').mediaelementplayer({
            alwaysShowControls: true,
            features: ['playpause','progress','volume'],
            audioVolume: 'horizontal',
            audioWidth: 450,
            audioHeight: 70,
            iPadUseNativeControls: true,
            iPhoneUseNativeControls: true,
            AndroidUseNativeControls: true
            });
        });
    </script>

我非常想使用我的定制风格。

我遵循了本教程的风格音频播放器：http://designshack.net/articles/css/custom-html5-audio-element-ui/

基本上，我试着把音频播放器放在for each之外，它的样式很好。当它在循环内时，它为什么不起作用？

我是新来的Knockout JS所以请容忍我。谢谢。

Answer 1

您可能会看到这一点，因为在Knockout将音频播放器添加到DOM之前执行.mediaelementplayer()函数时，没有任何样式可供选择。

如果需要，可以推迟评估，但仍可能遇到时间问题。尝试在这里使用自定义绑定处理程序-

<script type="text/javascript">
    ko.bindingHandlers.audioPlayer = {
        init: function (element, valueAccessor) {
        $(element).mediaelementplayer({
            alwaysShowControls: true,
            features: ['playpause','progress','volume'],
            audioVolume: 'horizontal',
            audioWidth: 450,
            audioHeight: 70,
            iPadUseNativeControls: true,
            iPhoneUseNativeControls: true,
            AndroidUseNativeControls: true
        });
    };
</script>

你可以在你的HTML里用到这样的东西-

<audio data-bind="audioPlayer: {}" id="audio-player" src="media/evidence-song.mp3" type="audio/mp3" controls="controls"></audio>

一个注意事项是，您要在foreach中设置Id，这意味着多个元素将具有完全相同的Id --通常是不好的做法。