您的位置：首页 > Web前端 > Node.js

Node.js 切近实战(五) 之图书管理系统(图书Gallery)

2017-04-24 13:33 531 查看
上一节我们讲述了图书管理系统的查询，今天我们来看一下图书管理系统的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://www.learnbo.com/front/article/cmsIndex
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航