Node.js 切近實戰(五) 之圖書管理系統(圖書Gallery)

上一節咱們講述了圖書管理系統的查詢，今天咱們來看一下圖書管理系統的Gallery，一個很簡單的Gallery。在看Gallery以前咱們先看一下RoboMongo，一個鏈接MongoDb的客戶端工具，以圖形化的界面操做MongoDB。先看一下

看數據很是方便，還支持table顯示，文本格式顯示等

很是過癮，還能夠用菜單進行編輯，刪除操做。

關於這個工具，誰用誰知道。

 

OK，今天主要任務仍是要講咱們的圖書Gallery，先看一下UI代碼

1 2 3 4 5 6 7 8 9

#book_list(ng-controller='bookListCtrl')  #book_gallary   a(ng-repeat='model in BookList track by $id(model)' ng-href='#' on-finish-render="ngRepeatFinished")    img(ng-src='/book/image/{{model.Image}}')      block scripts   script(type='text/javascript' src='/javascripts/thirdpart/justifiedGallery/jquery.justifiedGallery.min.js')   script(type='text/javascript' src='/javascripts/local/book/booklist.js')

注意這裏的on-finish-render，其實這是一個angular指令，用來判斷ng-repeat是否已經完成，在這裏爲何要指定track by，是由於若是你不指定的，一旦有重複的數據，angular就會報錯。咱們指定的話，每行就會生成本身的自增id行號。由於angular須要一個惟一值能夠與生成的dom綁定，以便檢索追蹤。ok，這裏圖書Gallery使用的jQuery.justifiedGallery。咱們看一下js的代碼。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

var appModule = angular.module('bookListModule', ["kendo.directives"]);   appModule.controller('bookListCtrl', function ($scope, $http) {     $scope.pageIndex = 0;     $http.get('/book?pageIndex=' + $scope.pageIndex + '&pageSize=50')     .success(function (result) {         $scope.BookList = result.books;     });           $scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {         angular.element("#book_gallary").justifiedGallery();     }); }).directive('onFinishRender', function ($timeout) {     return {         restrict: 'A',         link: function (scope, element, attr) {             if (scope.$last === true) {                 $timeout(function () {                     scope.$emit('ngRepeatFinished');                 });             }         }     } });   angular.element('#book_list').data('$injector', ''); angular.bootstrap(angular.element('#book_list'), ['bookListModule']);

首先請求api，查詢圖書，將請求到的圖書信息BookList綁定到UI。注意下面的指令onFinishRender是如何判斷ng-repeat已經結束的，在當前scope中，有個$last屬性，若是$last爲true，則認爲該行數據已經渲染結束，併發射事件ngRepeatFinished，發射之後，會被接收到，即$scope.$on('ngRepeatFinished')。注意這裏的$setTimeout，每一行數據渲染都會走link，每一行渲染結束$scope.$last都爲true，因此咱們只能在每一行綁定渲染結束以後，去發射事件。

在這個事件中，咱們再對圖片所在Div建立Gallery。若是頁面DOM都沒結束，你就建立Gallery，確定是不行的，因此上面的代碼就是解決這個問題的。

最後看一下運行效果

 

結束語

 

免費學習更多精品課程，登陸樂搏學院官網http://h.learnbo.cn/

或關注咱們的官方微博微信，還有更多驚喜哦~

 

本文出自 「技術創造價值」 博客，請務必保留此出處http://leelei.blog.51cto.com/856755/1791837