第四张卡片的知识点不太多,做这张卡片主要有两个收获。
学会了一些新的underscore的函数
1._.pluck(list,key);
pluck也许是map最常使用的用例模型的简化版本,即萃取对象数组中某属性值,返回一个数组。
这个函数是用来取得所有竞价的价格。代码如下:
prices =_(_(current_bidding_participants).pluck('price')).uniq();
这个代码表示的意思是,从所有参与竞价的人当中,取出他们竞价的价格。其中uniq函数是用来去掉相同的值。
2._.each(list, iterator)
each函数的作用是遍历list中的所有元素,按顺序用遍历输出每个元素。
我在party_bid第四张卡片中对他的使用如下:
_(prices).each(function(price){ var count = 0; _(current_bidding_participants).each(function(participant){ if(participant.price === price){ count = count + 1; } }); bidding_prices.push({price:price,number_of_participants:count}); });
这段代码的作用是,遍历所有的竞价,计算每个价格的出现次数。
学习使用模态框
在第四张卡片中,我们用它来弹框显示竞价结果。那么,具体是怎么使用的呢?
我们在竞价结果页面的jade文件中,加入
#myModal.modal.fade(tabindex="-1",role="dialog",aria-labelledby="myModalLabel",aria-hidden="true") .modal-header button.close(type="button" data-dismiss="modal" aria-hidden="true") × // 这一句是建立一个关闭的按钮 h4.modal-title //模态框的标题 | 竞价结果 .modal-body(style='display:block') //模态框内容,通过winner的值来控制显示内容 p(ng-show = 'winner') 竞价成功者姓名:{{winner.name}}6162:5 p(ng-show = 'winner') 竞价成功者电话:{{winner.phone}} p(ng-show = 'winner') 竞价成功者价格:¥{{winner.price}}6162:5 p.bidding_failed(ng-show = '!winner') 竞价失败! //在css文件中建立一个bidding_failed的类的style
css文件中添加的代码如下,我们以此来调节竞价失败在框中的显示:
.bidding_failed{
font-size: 50px;
position: absolute;
left:170px;
top: 100px;
}
在竞价页面的controller文件中,我们加入这样的代码:
if($routeParams.last_page == '竞价列表'){ //该判断是为了让该模态框仅在竞价结束后出现 $('#myModal').modal("show"); setTimeout(function(){ //这个函数的作用是让该模态框在三秒之后消失 $('#myModal').modal('hide')} ,3000); }
在完成party_bid第四张卡片时,需要特别注意的一点是,在将短信中的竞价价格存入price的时候,要用Nummer()函数将其转换为数字类型再存。如果直接存的话,保存在竞价信息里面的价格将是以字符串类型存在的。