在yeoman下做party_bid第四张卡总结

第四张卡做的是对竞价结果的处理，在对竞价结果进行处理的时候用了underscore的_.chain对一个对象进行封装是很方便的

 

1 竞价结果的升序排列

方法：从本地数据库中找到属于当前活动的当前竞价的短信，取出并暂存到一个数组中，然或对这个数组按价格进行升序排列，在页面上列表显示的时候就是按价格升序排列的，排序时用到了_.sortBy实现升序排列。

实例：

 

BidMessage.search_current = function () {
    return _.filter(BidMessage.get(), function (bid_message) {
        return bid_message.activity == localStorage.current_activity && bid_message.bid == localStorage.current_bid;
    })
}/*遍历竞价短信数组中的每一个对象，找到属于当前活动当前竞价的短信并将结果返回*/

BidMessage.results = function () {
    return _.sortBy(BidMessage.search_current(), function (bid_message) {
        return bid_message.price;
    })
}/*对结果进行按价格升序排列，并将排列好的结果返回*/

 

 

2 统计每个价格的出价人数

方法：将按价格升序拍好的竞价结果用_.groupBy按价格进行分组，然后将分组的结果和每一组的长度用_.map映射要另外一个数组中，然后在页面显示

实例：

 

BidMessage.counts = function () {
    return _.chain(BidMessage.results())
        .groupBy(function (result) {
            return result.price;
        })/*按价格进行分组*/
        .map(function (value, key) {
            return {"price": key, "count": value.length}
        })/*将分组的结果映射到另外一个数组中，这个数组中包括每个价格及其人数*/
        .value();
}

 

用_.chain对一个对象进行多种操作，执行到value时停止并返回结果。

 

3 模态框的引入

       我在做模态框提醒的时候，引用之前做party_bid的时候的模态框，但是在页面测试的时候模态框的样式变了，而且手动关闭模态框的按钮也不显示，之后改了一下模态框显示的样式问题就解决了

在haml里做如下修改

 

.modal.fade#ModalSuccess(style="display: inline-table")

 

       模态框手动关闭无响应的问题：是因为yeoman里对haml的格式要求比较高，在写的时候多加了空格，不能加载为对应的html，所以在页面上手动关闭模态框的时候没有任何反映。

实例：

 

错误的haml
%button.close(type = "button" data-dismiss = "modal" aria-hidden = "true") ×
修改为
%button.close(type="button" data-dismiss="modal" aria-hidden="true") ×

 

 

4 关于footer的显示

 方法：用ng-show实现竞价成功的时候显示竞价成功的footer,竞价失败的时候显示竞价失败的footer，当success=true的时候显示竞价成功的footer，当fail=true的时候显示竞价失败的footer。

 

%footer
  %div(ng-show="success")
    %pre /*使用%pre,在页面上显示的时候会保留haml里的空格*/
      竞价结果：{{bid_success.people}}    ￥{{bid_success.price}}    {{bid_success.phone}}    竞价成功！
%footer
  %div(ng-show="fail")
    %pre /*使用%pre,在页面上显示的时候会保留haml里的空格*/
      竞价结果： 竞价失败！

        这次在做footer的显示的时候发现了一个问题，就是我之前做的时候，模态框出现的时候footer就出现了，然后在JS里修改了一下，控制模态框消失之后才显示footer

实例：

$scope.bid_success = BidMessage.success_bid();
            $timeout(function () {
                $('#ModalSuccess').modal("show");
                $timeout(function () {
                    $('#ModalSuccess').modal('hide');
                    $scope.success = true;  /*模态框消失显示竞价成功的footer*/
                }, 3000)
            }, 1)