From dbd46c8dc5050f80f70aace1111712bf22ba4df5 Mon Sep 17 00:00:00 2001
From: Peter Deltchev <peter@deltchev.com>
Date: Sun, 14 Feb 2016 03:12:13 -0800
Subject: [PATCH] Added lots of "track by" and a few more one-time bindings.

---
 public/templates/account/album.html                |  8 ++++----
 public/templates/account/albums.html               |  4 ++--
 public/templates/account/playlists.html            |  2 +-
 public/templates/albums/index.html                 |  2 +-
 public/templates/artists/index.html                |  2 +-
 public/templates/directives/comments.html          |  2 +-
 public/templates/directives/image-upload.html      |  4 ++--
 public/templates/directives/track-editor.html      | 14 +++++++-------
 public/templates/partials/auth/login.html          |  2 +-
 public/templates/playlists/index.html              |  2 +-
 public/templates/tracks/frame.html                 |  2 +-
 public/templates/tracks/index.html                 |  2 +-
 public/templates/uploader/index.html               |  6 +++---
 .../scripts/app/controllers/account-albums.coffee  |  2 ++
 resources/views/shared/_app_layout.blade.php       |  2 +-
 15 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/public/templates/account/album.html b/public/templates/account/album.html
index aa6292b3..f5867312 100644
--- a/public/templates/account/album.html
+++ b/public/templates/account/album.html
@@ -29,18 +29,18 @@
             <label class="strong">Album Tracks</label>
             <div id="track-selector" class="pfm-popup">
                 <ul>
-                    <li ng-repeat="track in data.tracksDb" ng-class="{selected: trackIds[track.id]}">
-                        <a pfm-eat-click href="#" ng-click="toggleTrack(track); $event.stopPropagation();">{{track.title}}</a>
+                    <li ng-repeat="track in data.tracksDb track by track.id" ng-class="{selected: trackIds[track.id]}">
+                        <a pfm-eat-click href="#" ng-click="toggleTrack(track); $event.stopPropagation();">{{::track.title}}</a>
                     </li>
                 </ul>
             </div>
 
             <ul class="album-track-listing" ui-sortable="{handle: '.handle', axis: 'y', forcePlaceholderSizeType: true, update: sortTracks}" ng-model="tracks">
-                <li ng-repeat="track in tracks">
+                <li ng-repeat="track in tracks track by track.id">
                     <div>
                         <span class="btn btn-small pull-left handle"><i class="icon-sort"></i></span>
                         <a href="#" class="btn btn-small pull-right btn-danger" ng-click="toggleTrack(track)" pfm-eat-click><i class="icon-remove"></i></a>
-                        <span>{{track.title}}</span>
+                        <span>{{::track.title}}</span>
                     </div>
                 </li>
             </ul>
diff --git a/public/templates/account/albums.html b/public/templates/account/albums.html
index 25518f84..b896d1b6 100644
--- a/public/templates/account/albums.html
+++ b/public/templates/account/albums.html
@@ -10,7 +10,7 @@
     <div class="two-pane-view" ng-class="{open: data.isEditorOpen, closed: !data.isEditorOpen}">
         <div class="list">
             <ul class="account-albums-listing stretch-to-bottom">
-                <li ng-repeat="album in albums" ng-class="{selected: album.id == data.selectedAlbum.id}">
+                <li ng-repeat="album in albums track by album.id" ng-class="{selected: album.id == data.selectedAlbum.id}">
                     <a href="/account/albums/edit/{{album.id}}">
                         <img pfm-src-loader="album.covers.normal" pfm-src-size="normal" class="image" />
                         <span class="title">{{album.title}}</span>
@@ -18,7 +18,7 @@
                     </a>
                 </li>
                 <li ng-show="!albums.length" class="empty">
-                    No albums found...
+                    No albums found&hellip;
                 </li>
             </ul>
         </div>
diff --git a/public/templates/account/playlists.html b/public/templates/account/playlists.html
index 32ebf64e..1eeaca1b 100644
--- a/public/templates/account/playlists.html
+++ b/public/templates/account/playlists.html
@@ -1,5 +1,5 @@
 <ul class="playlists stretch-to-bottom">
-    <li ng-repeat="playlist in playlists">
+    <li ng-repeat="playlist in playlists track by playlist.id">
         <div class="btn-group">
             <a href="#" pfm-eat-click class="btn btn-small" ng-click="togglePlaylistPin(playlist)" ng-class="{active: playlist.is_pinned, 'btn-primary': playlist.is_pinned}">
                 <i class="icon-pushpin"></i>
diff --git a/public/templates/albums/index.html b/public/templates/albums/index.html
index 076124d0..88842457 100644
--- a/public/templates/albums/index.html
+++ b/public/templates/albums/index.html
@@ -1,7 +1,7 @@
 <div class="pagination" ng-show="totalPages > 1">
     <ul>
         <li ng-class="{disabled: !prevPage}"><a href="#" ng-click="gotoPage(prevPage);" pfm-eat-click>Prev</a></li>
-        <li ng-repeat="page in pages" ng-class="{active: page == currentPage}">
+        <li ng-repeat="page in pages track by page" ng-class="{active: page == currentPage}">
             <a href="#" ng-click="gotoPage(page);" pfm-eat-click>{{page}}</a>
         </li>
         <li ng-class="{disabled: !nextPage}"><a href="#" ng-click="gotoPage(nextPage);" pfm-eat-click>Next</a></li>
diff --git a/public/templates/artists/index.html b/public/templates/artists/index.html
index 076124d0..88842457 100644
--- a/public/templates/artists/index.html
+++ b/public/templates/artists/index.html
@@ -1,7 +1,7 @@
 <div class="pagination" ng-show="totalPages > 1">
     <ul>
         <li ng-class="{disabled: !prevPage}"><a href="#" ng-click="gotoPage(prevPage);" pfm-eat-click>Prev</a></li>
-        <li ng-repeat="page in pages" ng-class="{active: page == currentPage}">
+        <li ng-repeat="page in pages track by page" ng-class="{active: page == currentPage}">
             <a href="#" ng-click="gotoPage(page);" pfm-eat-click>{{page}}</a>
         </li>
         <li ng-class="{disabled: !nextPage}"><a href="#" ng-click="gotoPage(nextPage);" pfm-eat-click>Next</a></li>
diff --git a/public/templates/directives/comments.html b/public/templates/directives/comments.html
index d79c94cf..d2b728e7 100644
--- a/public/templates/directives/comments.html
+++ b/public/templates/directives/comments.html
@@ -9,7 +9,7 @@
         <li ng-show="resource.comments.length == 0" class="empty">
             There are no comments yet!
         </li>
-        <li ng-repeat="comment in resource.comments">
+        <li ng-repeat="comment in resource.comments track by comment.id">
             <img pfm-src-loader="::comment.user.avatars.thumbnail" pfm-src-size="thumbnail" />
             <div class="content">
                 <a ng-href="{{::comment.user.url}}">{{::comment.user.name}}</a>
diff --git a/public/templates/directives/image-upload.html b/public/templates/directives/image-upload.html
index ececa03a..7495cf4d 100644
--- a/public/templates/directives/image-upload.html
+++ b/public/templates/directives/image-upload.html
@@ -11,8 +11,8 @@
     </div>
     <div id="image-selector" class="pfm-popup image-selector">
         <ul>
-            <li ng-repeat="image in images" ng-click="selectGalleryImage(image)">
-                <img ng-src="{{image.urls.small}}" />
+            <li ng-repeat="image in images track by image.id" ng-click="selectGalleryImage(image)">
+                <img ng-src="{{::image.urls.small}}" />
             </li>
         </ul>
     </div>
diff --git a/public/templates/directives/track-editor.html b/public/templates/directives/track-editor.html
index 2f0a60d2..e3eaac49 100644
--- a/public/templates/directives/track-editor.html
+++ b/public/templates/directives/track-editor.html
@@ -60,8 +60,8 @@
                         <li ng-class="{selected: selectedAlbum == null}">
                             <a pfm-eat-click href="#" ng-click="selectAlbum(null);">None</a>
                         </li>
-                        <li ng-repeat="album in albums" ng-class="{selected: selectedAlbum.id == album.id}">
-                            <a pfm-eat-click href="#" ng-click="selectAlbum(album);">{{album.title}}</a>
+                        <li ng-repeat="album in albums track by album.id" ng-class="{selected: selectedAlbum.id == album.id}">
+                            <a pfm-eat-click href="#" ng-click="selectAlbum(album);">{{::album.title}}</a>
                         </li>
                     </ul>
                 </div>
@@ -71,8 +71,8 @@
                 <a pfm-popup="song-selector" pfm-popup-close-on-click href="#" class="btn btn-small">Show Songs: <strong>{{selectedSongsTitle}}</strong></a>
                 <div id="song-selector" class="pfm-popup">
                     <ul>
-                        <li ng-repeat="song in taxonomies.showSongs" ng-class="{selected: selectedSongs[song.id]}">
-                            <a pfm-eat-click href="#" ng-click="toggleSong(song); $event.stopPropagation();">{{song.title}}</a>
+                        <li ng-repeat="song in ::taxonomies.showSongs track by song.id" ng-class="{selected: selectedSongs[song.id]}">
+                            <a pfm-eat-click href="#" ng-click="toggleSong(song); $event.stopPropagation();">{{::song.title}}</a>
                         </li>
                     </ul>
                 </div>
@@ -111,10 +111,10 @@
         <div class="form-row">
             <label class="strong">Choose a License:</label>
             <ul class="license-grid">
-                <li ng-repeat="license in taxonomies.licenses" ng-class="{selected: track.license_id == license.id}">
+                <li ng-repeat="license in ::taxonomies.licenses track by license.id" ng-class="{selected: track.license_id == license.id}">
                     <div ng-click="track.license_id = license.id; touchModel()">
-                        <strong>{{license.title}}</strong>
-                        <p>{{license.description}}</p>
+                        <strong>{{::license.title}}</strong>
+                        <p>{{::license.description}}</p>
                         <a href="#" pfm-eat-click class="btn" ng-class="{'btn-primary': track.license_id == license.id, 'disabled': isSaving}">
                             <span ng-hide="track.license_id == license.id">Select</span>
                             <span ng-show="track.license_id == license.id">Selected</span>
diff --git a/public/templates/partials/auth/login.html b/public/templates/partials/auth/login.html
index 171fe3a0..69f2731d 100644
--- a/public/templates/partials/auth/login.html
+++ b/public/templates/partials/auth/login.html
@@ -1,7 +1,7 @@
 <form ng-submit="login.submit()" class="form-horizontal">
     <ul class="messages" ng-hide="!messages.length">
         <li ng-repeat="message in messages" class="alert alert-error">
-            {{message}}
+            {{::message}}
         </li>
     </ul>
     <div class="control-group">
diff --git a/public/templates/playlists/index.html b/public/templates/playlists/index.html
index 076124d0..88842457 100644
--- a/public/templates/playlists/index.html
+++ b/public/templates/playlists/index.html
@@ -1,7 +1,7 @@
 <div class="pagination" ng-show="totalPages > 1">
     <ul>
         <li ng-class="{disabled: !prevPage}"><a href="#" ng-click="gotoPage(prevPage);" pfm-eat-click>Prev</a></li>
-        <li ng-repeat="page in pages" ng-class="{active: page == currentPage}">
+        <li ng-repeat="page in pages track by page" ng-class="{active: page == currentPage}">
             <a href="#" ng-click="gotoPage(page);" pfm-eat-click>{{page}}</a>
         </li>
         <li ng-class="{disabled: !nextPage}"><a href="#" ng-click="gotoPage(nextPage);" pfm-eat-click>Next</a></li>
diff --git a/public/templates/tracks/frame.html b/public/templates/tracks/frame.html
index 70b4ed61..63249817 100644
--- a/public/templates/tracks/frame.html
+++ b/public/templates/tracks/frame.html
@@ -22,7 +22,7 @@
         <li class="dropdown">
             <a href="#" class="btn btn-small dropdown-toggle" ng-show="::auth.isLogged">Add to Playlist</a>
             <ul class="dropdown-menu">
-                <li ng-repeat="playlist in playlists">
+                <li ng-repeat="playlist in playlists track by playlist.id">
                     <a ng-class="{disabled: playlist.message, 'btn-success': playlist.message}"
                        ng-href="{{::playlist.url}}"
                        pfm-eat-click
diff --git a/public/templates/tracks/index.html b/public/templates/tracks/index.html
index a8426255..7cc15655 100644
--- a/public/templates/tracks/index.html
+++ b/public/templates/tracks/index.html
@@ -33,7 +33,7 @@
         </a>
         <a class="btn" pfm-eat-click ng-click="clearFilter('genres')"><i class="icon-remove"></i></a>
         <ul class="dropdown-menu">
-            <li ng-repeat="genre in ::filters.genres.values" ng-class="{selected: query.isIdSelected('genres', genre.id)}">
+            <li ng-repeat="genre in ::filters.genres.values track by genre.id" ng-class="{selected: query.isIdSelected('genres', genre.id)}">
                 <a class="dont-close" pfm-eat-click href="#" ng-click="toggleListFilter('genres', genre.id); $event.stopPropagation();"><i class="icon-plus"></i></a>
                 <a pfm-eat-click href="#" ng-click="setListFilter('genres', genre.id);">{{::genre.title}}</a>
             </li>
diff --git a/public/templates/uploader/index.html b/public/templates/uploader/index.html
index 31acaec6..171c0226 100644
--- a/public/templates/uploader/index.html
+++ b/public/templates/uploader/index.html
@@ -10,19 +10,19 @@
     <p>Please note that you need to publish your tracks after uploading them before they will become available to the public.</p>
 
     <ul class="uploads">
-        <li ng-repeat="upload in data.queue" ng-class="{'uploading': upload.isUploading, 'has-error': upload.error != null, 'is-processing': upload.isProcessing || upload.progress >= 100}" ng-animate="'upload-queue'">
+        <li ng-repeat="upload in data.queue track by $index" ng-class="{'uploading': upload.isUploading, 'has-error': upload.error != null, 'is-processing': upload.isProcessing || upload.progress >= 100}" ng-animate="'upload-queue'">
             <p>
 
                 <span ng-show="!upload.success">
                     <strong ng-show="upload.isUploading && upload.error == null && upload.progress < 100">Uploading&hellip;</strong>
                     <strong ng-show="upload.isProcessing || (upload.isUploading && upload.progress >= 100)">Processing&hellip;</strong>
                     <strong ng-show="upload.error != null">Error</strong>
-                    {{upload.name}} -
+                    {{::upload.name}} -
                     <strong ng-show="upload.error != null">{{upload.error}}</strong>
                 </span>
 
                 <span ng-show="upload.success">
-                    <a href="/account/tracks/edit/{{upload.trackId}}" class="btn btn-small btn-primary">
+                    <a href="/account/tracks/edit/{{::upload.trackId}}" class="btn btn-small btn-primary">
                         Publish
                     </a>
                     {{upload.name}}
diff --git a/resources/assets/scripts/app/controllers/account-albums.coffee b/resources/assets/scripts/app/controllers/account-albums.coffee
index 6804763e..8c56c067 100644
--- a/resources/assets/scripts/app/controllers/account-albums.coffee
+++ b/resources/assets/scripts/app/controllers/account-albums.coffee
@@ -33,6 +33,7 @@ angular.module('ponyfm').controller "account-albums", [
         selectAlbum = (album) -> $scope.data.selectedAlbum = album
 
         updateTracks = (tracks) ->
+            $scope.data.tracksDb.length = 0
             $scope.data.tracksDb.push track for track in tracks
 
         tracks.refresh('published=true&in_album=false').done updateTracks
@@ -40,6 +41,7 @@ angular.module('ponyfm').controller "account-albums", [
         albumsDb = {}
 
         updateAlbums = (albums) ->
+            albumsDb.length = 0
             $scope.albums.length = 0
 
             for album in albums
diff --git a/resources/views/shared/_app_layout.blade.php b/resources/views/shared/_app_layout.blade.php
index 0ad04930..bb9d3736 100644
--- a/resources/views/shared/_app_layout.blade.php
+++ b/resources/views/shared/_app_layout.blade.php
@@ -94,7 +94,7 @@
                     </h3>
                 </li>
                 <li class="none" ng-show="!playlists.length"><span>no pinned playlists</span></li>
-                <li class="dropdown" ng-repeat="playlist in playlists" ng-cloak ng-class="{selected: stateIncludes('content.playlist') && $state.params.id == playlist.id}">
+                <li class="dropdown" ng-repeat="playlist in playlists track by playlist.id" ng-cloak ng-class="{selected: stateIncludes('content.playlist') && $state.params.id == playlist.id}">
                     <a href="{{Helpers::angular('playlist.url')}}" ng-bind="playlist.title"></a>
                 </li>
             @else