Révise la gestion des sons via une CollectionView

js/app/models/sound.js

@@ -11,18 +11,24 @@ define(
             defaults: {
                 title: "",
                 character: "",
-                file: ""
+                file: "",
+                playing: false
             },
             play: function() {
-                this.audio = new Audio('sounds/'+this.attributes.file);
+                if( !this.audio ) {
-                this.audio.play();
+                    this.audio = new Audio('sounds/'+this.attributes.file);
+                }
 
-                return this;
+                this.audio.play();
+                this.attributes.playing    = true;
             },
             stop: function() {
                 if( this.audio && !this.audio.paused ) {
                     this.audio.pause();
+                    this.audio.load();
                 }
+
+                this.attributes.playing    = false;
             }
         });
 

js/app/templates/sound.hbs

@@ -0,0 +1 @@
+<a href="#">{{title}}</a>

js/app/templates/sounds.hbs

@@ -1,7 +0,0 @@
-<ul>
-{{#each data.sounds}}
-    <li>
-        <a href="#" data-sound="{{@key}}">{{title}}</a>
-    </li>
-{{/each}}
-</ul>

js/app/views/sound.js

@@ -0,0 +1,31 @@
+define(
+    'views/sound',
+    [
+        'marionette',
+        'models/sound',
+        'hbs!templates/sound'
+    ],
+    function (Marionette, SoundModel, SoundBlockTemplate) {
+        "use strict";
+
+        var SoundBlockView = Marionette.ItemView.extend({
+            template: SoundBlockTemplate,
+            model: SoundModel,
+            tagName: 'li',
+            ui: {
+                soundItem: 'a'
+            },
+            events: {
+                'click @ui.soundItem': 'playSound'
+            },
+            playSound: function(e) {
+                e.preventDefault();
+
+                this.trigger('sound:play');
+
+                this.model.play();
+            }
+        });
+
+        return SoundBlockView;
+});

js/app/views/soundboard.js

@@ -6,7 +6,7 @@ define(
         'views/sounds',
         'hbs!templates/soundboard'
     ],
-    function (Marionette, SoundSearchView, SoundListView, SoundboardTemplate) {
+    function (Marionette, SoundSearchView, SoundsView, SoundboardTemplate) {
         "use strict";
 
         var SoundboardView = Marionette.LayoutView.extend({
@@ -18,7 +18,7 @@ define(
             onShow: function() {
 
                 this.showChildView('search', new SoundSearchView());
-                this.showChildView('list', new SoundListView());
+                this.showChildView('list', new SoundsView());
 
             }
         });

js/app/views/sounds.js

@@ -5,19 +5,17 @@ define(
         'backbone.radio',
         'underscore',
         'collections/sounds',
-        'hbs!templates/sounds'
+        'views/sound'
     ],
-    function (Marionette, Radio, _, SoundsCollection, SoundListTemplate) {
+    function (Marionette, Radio, _, SoundsCollection, SoundView) {
         "use strict";
 
-        var SoundListView = Marionette.LayoutView.extend({
+        var SoundsCollectionView = Marionette.CollectionView.extend({
+            childView: SoundView,
             collection: new SoundsCollection(),
-            template: SoundListTemplate,
+            tagName: 'ul',
-            ui: {
+            childEvents: {
-                soundItem: 'li a'
+                'sound:play': 'stopPlayingSound'
-            },
-            events: {
-                'click @ui.soundItem': 'playSound'
             },
             initialize: function() {
                 var that    = this;
@@ -33,29 +31,19 @@ define(
                         that.render();
                     });
             },
-            playSound: function(e) {
+            stopPlayingSound: function() {
-                var index = $(e.currentTarget).attr('data-sound'),
+                var playingSound    = this.collection.findWhere({playing: true});
-                    sound = this.collection.at(index);
 
-                e.preventDefault();
+                if( playingSound ) {
-
+                    playingSound.stop();
-                this.stopCurrentSound();
-
-                if( sound ) {
-                    this.currentSound   = sound.play();
-                }
-            },
-            stopCurrentSound: function() {
-                if( this.currentSound ) {
-                    this.currentSound.stop();
                 }
             },
             serializeData: function () {
                 var viewData = {data: this.data};
 
-                return _.extend(viewData, Marionette.LayoutView.prototype.serializeData.apply(this, arguments));
+                return _.extend(viewData, Marionette.CollectionView.prototype.serializeData.apply(this, arguments));
             }
         });
 
-        return SoundListView;
+        return SoundsCollectionView;
 });