学习敏捷开发(trello)之party_bid卡片3，4总结

更新了这么久，前段时间一直没有写博客的冲动！昨天和老师聊了好多东西，感觉是应该坚持写博客了！好了，废话少说了，继续写！！

party_bid第三.第四张卡

说明:在第三和第四张卡中,主要是掌握是underscore工具库的使用方法.

underscore库的安装使用

安装underscorejs库

由于我们是采用的bower管理工具,所以我们只需要一个简单的命令就能搞定了

bower install underscore --save

说明: 使用--save参数,安装的时候,就会自动将安装的underscore写入到bower.json中,而不需要手动来添加,同样,在使用npm管理工具的使用,一样的有这个参数

添加underscore库进工程,方便使用

 <!-- bower:js -->
    <script src="/bower_components/underscore/underscore.js"></script>
    <script src="bower_components/jquery/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/json3/lib/json3.js"></script>
    <script src="bower_components/bootstrap/docs/assets/js/bootstrap.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-touch/angular-touch.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <!-- endbower -->

因为我们使用的bower包管理,因此我们只需要将underscore的路径添加进index.html就可以正常使用了.

jade网页模板的安装和使用

安装jade

安装jade模板生成工具,这样就能够在我们修改我们的代码后,即使将我们修改后的网页翻译成html并显示

npm install grunt-contrib-jade --save-dev

这里我们使用这条命令,就能够安装jade模板引擎,同时添加进package.json.

jade的使用

这里,我们需要对我们的gruntfile.js文件进行修改,将jade字段添加进去,可以参考,我写过的篇文章

jade的安装和使用

第四张卡之竞价成功者的计算

1.将竞价的人安装出价的高低进行排序,得到排序后的数组

BidResult.sort_by_price=function (bid_name){
    return _.sortBy(Bid.find_clicked_bid_messages(bid_name), function (list) {
        return list.price;
    })

};

2.将排序后的数组安装价格分组,并找出其中价格最低且长度是一的对象

BidResult.bid_success_user = function (argument){
    var count_price = _.groupBy(argument,function(obj){
        return obj.price;
    });
    BidResult.save_bid_count_price_user(count_price);
    return _.find(count_price,function(price){
        return price.length==1
    });
};

这样,我们利用underscore的sortby和grunpby就能找出最后胜利的竞价人

3.统计各个出价的人数

BidResult.save_bid_count_price_user=function(argument){
    var result = _.map(argument, function(value,key ){
        return {"price": key, "count": value.length}
    });
    localStorage['bid_result'] = JSON.stringify(result);
};

这里,我们使用underscore的map方法,将按照价格排序之后的数组,通过map重新组合成新的对象,

将价格作为新对象的price键,将该价格对应的人数,作为count的键,并将其存入localstorage中.

4.显示出统计结果

header.header
    | {{current_bid}} ({{bid_user_num}}人)
    button.btn.btn-primary.header-left(ng-show='true', ng-click='back_to_bid_list_page()') 返回
    button.btn.btn-primary.header-right(ng-show='true', ng-disabled='button_enable', ng-click='\
  back_to_bid_result_page()') 列表
#wrapper.wrapper
    ul.list-style-2
        li.clearfix.btn-default(ng-repeat='bid in bidcounts track by $index', ng-click='choose_bid(bid)')
            h3 ¥{{bid.price}}
            i {{bid.count}}人
footer
    div(ng-show='success_bid')
        h5
            | 竞价结果:{{success_user.name}}   ¥{{success_user.price}}    {{success_user.phone.slice(0,3)}}XXXX{{success_user.phone.slice(7)}}
    div(ng-show='fail_bid')
        h5
            | 竞价失败

这里,我们使用了jade模板引擎,同样,使用angular的ng-repeat标签显示出结果数组

bootstrap模态框的使用

在第四张卡中,我们通过模态框来显示成功竞价人的信息.模态框是bootstrap的一个js插件.

在使用模态框的时候,我们需要引入bootstrap的CSS样式

<link rel="stylesheet" href="bower_components/bootstrap/docs/assets/css/bootstrap.css" />

同时,我们还应该如入bootstrapjs和jqueryjs

    <script src="bower_components/jquery/jquery.js"></script>
    <script src="bower_components/bootstrap/docs/assets/js/bootstrap.js"></script>

这里,,特别说明一下,还需要引入一个样式,我之前就因为少引入了一个样式库,然后花了很多的时间来解决后面的问题

<link rel="stylesheet" href="bower_components/bootstrap/docs/assets/css/bootstrap-responsive.css" />

bootstrap-responsive.css是必须引入的,只有引入了这个库,才能够自动换行,能改自动适应浏览器,这可能就是他们所说的响应式布局吧?

在jade文件中,我们使用一下代码的完成模态框的使用

#example.modal.hide.fade(tabindex='-1', role='dialog', aria-labelledby='myModalLabel', aria-hidden='true')
    .modal-header
        a.close(data-dismiss='modal', ng-click='show_footer_by_button()') ×
        h3 竞价结果
    .modal-body(ng-show='modal_disp')
        h4 {{success_user.name}}¥{{success_user.price}}
        p {{success_user.phone.slice(0,3)}}XXXX{{success_user.phone.slice(7)}}
    .modal-body
        p {{is_bid_success}}
footer
    div(ng-show='show_success_user')
        h5
            | 竞价结果:{{success_user.name}}¥{{success_user.price}}{{success_user.phone.slice(0,3)}}XXXX{{success_user.phone.slice(7)}}
    div(ng-show='show_fail_user')
        h5
            | 竞价失败

在html页面的使用之后,我们还需要在相应的controller文件中设置触发它.

 $('#example').modal("show");
        $timeout(function () {
            $('#example').modal('hide');
            $scope.show_success_user=BidResult.is_bid_success(bid_success_user);
            $scope.show_fail_user= BidResult.is_bid_fail(bid_success_user);

        }, 3000);

因为这里有两种不同的情况,所以我使用了两个scope变量,有竞价失败和竞价成功的情况.
同时我们使用timeout来计时,timeout是以ms作为单位的,当3000ms到了,模态框就会消失..

在使用timeout的时候,别忘了将依赖注入进来,否则timeout也是没法使用的.

angular.module('partyBidApp')
    .controller('BidResultControl', function ($scope,$location,$routeParams, $timeout) {