More bindonce!

public/templates/directives/albums-list.html

@@ -1,5 +1,5 @@
 <ul class="albums-listing {{class}}">
-    <li ng-repeat="album in albums" bindonce>
+    <li bindonce ng-repeat="album in albums track by album.id">
         <a bo-href="album.url">
             <img class="image" pfm-src-loader="album.covers.small" pfm-src-size="small" />
             <span class="info">
@@ -16,6 +16,6 @@
         </a>
     </li>
     <li ng-show="!albums.length" class="empty">
-        No albums found...
+        No albums found&hellip;
     </li>
 </ul>

public/templates/directives/playlists-list.html

@@ -1,11 +1,11 @@
 <ul class="playlists-listing {{class}}">
-    <li ng-repeat="playlist in playlists" bindonce>
+    <li bindonce ng-repeat="playlist in playlists track by playlist.id">
-        <a href="{{playlist.url}}">
+        <a bo-href="playlist.url">
             <img class="image" pfm-src-loader="playlist.covers.small" pfm-src-size="small" />
             <span class="info">
-                <span class="title">{{playlist.title}}</span>
+                <span class="title" bo-text="playlist.title"></span>
                 <span class="published">
-                    by {{playlist.user.name}}
+                    by <span bo-text="playlist.user.name"></span>
                 </span>
                 <span class="stats">
                     <strong bo-text="playlist.stats.favourites"></strong> <i class="icon-star"></i>
@@ -16,6 +16,6 @@
         </a>
     </li>
     <li ng-show="!playlists.length" class="empty">
-        No playlists found...
+        No playlists found&hellip;
     </li>
 </ul>

public/templates/directives/tracks-list.html

@@ -21,7 +21,7 @@
             <span class="artist" bo-text="track.user.name + ' / ' + track.genre.name"></span>
         </a>
     </li>
-    <li ng-show="!tracks.length" class="empty">
+    <li ng-if="!tracks.length" class="empty">
         No tracks found&hellip;
     </li>
 </ul>

public/templates/tracks/index.html

@@ -5,9 +5,11 @@
         </a>
         <a class="btn" pfm-eat-click ng-click="clearFilter('trackTypes')"><i class="icon-remove"></i></a>
         <ul class="dropdown-menu">
-            <li ng-repeat="type in filters.trackTypes.values" ng-class="{selected: query.isIdSelected('trackTypes', type.id)}">
+            <li bindonce ng-repeat="type in filters.trackTypes.values track by type.id"
+                ng-class="{selected: query.isIdSelected('trackTypes', type.id)}"
+            >
                 <a class="dont-close" pfm-eat-click href="#" ng-click="toggleListFilter('trackTypes', type.id); $event.stopPropagation();"><i class="icon-plus"></i></a>
-                <a pfm-eat-click href="#" ng-click="setListFilter('trackTypes', type.id);">{{type.title}}</a>
+                <a pfm-eat-click href="#" ng-click="setListFilter('trackTypes', type.id);" bo-text="type.title"></a>
             </li>
         </ul>
     </li>
@@ -17,9 +19,11 @@
         </a>
         <a class="btn" pfm-eat-click ng-click="clearFilter('showSongs')"><i class="icon-remove"></i></a>
         <ul class="dropdown-menu">
-            <li ng-repeat="song in filters.showSongs.values" ng-class="{selected: query.isIdSelected('showSongs', song.id)}">
+            <li bindonce ng-repeat="song in filters.showSongs.values track by song.id"
+                ng-class="{selected: query.isIdSelected('showSongs', song.id)}"
+            >
                 <a class="dont-close" pfm-eat-click href="#" ng-click="toggleListFilter('showSongs', song.id); $event.stopPropagation();"><i class="icon-plus"></i></a>
-                <a pfm-eat-click href="#" ng-click="setListFilter('showSongs', song.id);">{{song.title}}</a>
+                <a pfm-eat-click href="#" ng-click="setListFilter('showSongs', song.id);" bo-text="song.title"></a>
             </li>
         </ul>
     </li>
@@ -29,9 +33,9 @@
         </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 bindonce ng-repeat="genre in filters.genres.values" 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>
+                <a pfm-eat-click href="#" ng-click="setListFilter('genres', genre.id);" bo-text="genre.title"></a>
             </li>
         </ul>
     </li>
@@ -41,8 +45,10 @@
         </a>
         <a class="btn" pfm-eat-click ng-click="clearFilter('isVocal')"><i class="icon-remove"></i></a>
         <ul class="dropdown-menu">
-            <li ng-repeat="item in filters.isVocal.values" ng-class="{selected: item == query.filters.isVocal}">
+            <li bindonce ng-repeat="item in filters.isVocal.values track by $index"
-                <a pfm-eat-click href="#" ng-click="setFilter('isVocal', item);">{{item.title}}</a>
+                ng-class="{selected: item == query.filters.isVocal}"
+            >
+                <a pfm-eat-click href="#" ng-click="setFilter('isVocal', item);" bo-text="item.title"></a>
             </li>
         </ul>
     </li>
@@ -52,18 +58,18 @@
         </a>
         <a class="btn" pfm-eat-click ng-click="clearFilter('sort')"><i class="icon-remove"></i></a>
         <ul class="dropdown-menu">
-            <li ng-repeat="filter in filters.sort.values" ng-class="{selected: filter == query.filters.sort}">
+            <li bindonce ng-repeat="filter in filters.sort.values track by $index" ng-class="{selected: filter == query.filters.sort}">
-                <a pfm-eat-click href="#" ng-click="setFilter('sort', filter)">{{filter.title}}</a>
+                <a pfm-eat-click href="#" ng-click="setFilter('sort', filter)" bo-text="filter.title"></a>
             </li>
         </ul>
     </li>
 </ul>
 
-<div class="pagination" ng-show="totalPages > 1">
+<div class="pagination" ng-if="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 bindonce ng-repeat="page in pages track by page" ng-class="{active: page == currentPage}">
-            <a href="#" ng-click="gotoPage(page);" pfm-eat-click>{{page}}</a>
+            <a href="#" ng-click="gotoPage(page);" pfm-eat-click bo-text="page"></a>
         </li>
         <li ng-class="{disabled: !nextPage}"><a href="#" ng-click="gotoPage(nextPage);" pfm-eat-click>Next</a></li>
         <li class="pagination-jump">