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