Создание многоразового аудио/вид компонента

Question

JSON я получаю от сервера включает в себя playable-url свойства:

{ 
    ... 
    "text" : "Audio transcription", 
    "playable-url" : 'http://myserver.com/full/path/audio.wav" 
    .... 
} 

я получаю список, который я показываю в табличном формате. В одном из столбцов я хочу показать элемент html, позволяющий пользователю прослушивать аудио. Для этого я планирую генерировать разметку для audio tag:

<audio controls> 
    <source src="horse.ogg" type="audio/ogg"> 
    <source src="horse.mp3" type="audio/mpeg"> 
    Your browser does not support the audio tag. 
</audio> 

Но я не уверен, будет ли лучше, чтобы обеспечить View или Component для этого.

Какой был бы лучший подход? Есть ли какой-нибудь пример аудио View/Component, который я мог бы использовать для моей реализации?

Answer 1

Необходимо использовать компонент. Создание пользовательского представления здесь не требуется, так как вам не нужно обрабатывать какие-либо расширенные пользовательские события. Что-то вдоль должно работать нормально: http://jsfiddle.net/ud3323/3DvXm/

HTML:

<script type="text/x-handlebars" id="components/music-file"> 
    <audio controls> 
     <source {{bind-attr src=source.mp3}} type="audio/mpeg"> 
     Your browser does not support the audio tag. 
    </audio> 
</script> 
<script type="text/x-handlebars" data-template-name="application"> 
    <h1>Audio Component</h1> 
    {{outlet}} 
</script> 
<script type="text/x-handlebars" data-template-name="index"> 
    {{music-file source=model}} 
</script> 

JS:

App = Ember.Application.create({}); 

App.IndexRoute = Ember.Route.extend({ 
    model: function(){ 
     return { 
     mp3: 'https://archive.org/download/onclassical-quality-wav-audio-files-of-classical-music/onclassical_demo_fiati-di-parma_thuille_terzo-tempo_sestetto_small-version_64kb.mp3' 
    }; 
    } 
});