party_bid第四张卡片

第四张卡片的知识点不太多，做这张卡片主要有两个收获。


学会了一些新的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") &times // 这一句是建立一个关闭的按钮
        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()函数将其转换为数字类型再存。如果直接存的话，保存在竞价信息里面的价格将是以字符串类型存在的。