学习敏捷开发，party_bid故事卡3---组织竞价

         当第三张卡到来的时候，我们又不得不思考我们的逻辑结构是不是需要进行一些改变来适应新的需求，这个时候我才更加清晰的认识到什么是一个活动，一个活动不仅仅是用来报个名就完了，如果那样的话也就没什么意思了，在回头看看这个项目的题目，对活动又有了完整的理解。报名只是活动的一部分，报名是为了后面的竞价，竞价才是活动的主要内容。那活动有没有在进行就取决于有没有在报名有没有在竞价，一次活动也应该不只竞价一个东西，也不一定一次竞价就能成功。这样我们对这个项目的业务逻辑的理解就更加的到位了。

         1.数据结构的变更

         因为我们在前面已经对activity进行了重构，在activity类中添加了activity_sign_status属性，那么只要再增加一个activity_bid_status就可以很容易的应对新的需求了。有经验的程序员总是会为程序可能会有的新的需求变更有一定的预测，而在一开始就做出比较好的架构，以增强程序的扩展性。

          因为一个活动会有若干个竞价，我们就必须要让这些竞价和对应的活动绑定，就是当进入不同的活动页面的时候能够看到对应的竞价，我是使用 activity_name+''竞价x'的方式来存储不同活动不同竞价的参与竞价的人的信息。但是需求中要求不管什么活动都显示竞价1,竞价2,...，但是这只是显示什么的问题，这里假设一个活动的竞价数不会超过99,那么在竞价数在十个以内的时候只需要截取最后三个字符，当竞价数大于十个小于100的时候，截取最后四位，实现代码如下：

Biding.get_biding_list_for_show = function(activity_name,stored_tail) {    var biding_list = JSON.parse(localStorage[activity_name+stored_tail]);    var count = 1;    for (var i=0; i<biding_list.length; i++){        if (count < 10){            biding_list[i].name = biding_list[i].name.slice(-3);            count += 1;        }        else if(count > 9) {            biding_list[i].name = biding_list[i].name.slice(-4);            count += 1;        }    }    return biding_list.reverse();};

            然后在biding_list_controller里边调用此方法,代码如下：

var passed_activity_name = $routeParams.activity_name;$scope.bidings = Biding.get_biding_list_for_show(passed_activity_name,'-bid');

          2.将竞价信息抽象出一个类

function Biding(biding_name,biding_status){    this.name = biding_name;    this.status = biding_status;}

          这里竞价类里边有两个属性，竞价名和竞价状态，'1‘表示正在进行竞价，’2'表示竞价已经结束，因为点击竞价列表开始按钮，竞价就开始了。所以实际上不能确定一个未开始的状态。

          在这个类里还有一些静态方法用来操作和竞价有关的状态量或者竞价信息的存取操作。

          

          3.活动正在进行黄色标记

          这里我们需要对活动的概念进一步清晰，活动包含活动报名和活动竞价，所以对于一个活动，正在报名或者有竞价在进行那么这个活动就正在进行，因为我们在活动这个对象中设置了两个属性sign_status和bid_status，只要这两个属性有一个为'1’(1表示正在进行），那么就满足活动正在进行，应该设置为黄色，代码如下

         css代码

.true {    margin-bottom: 10px;    height: 36px;    background-color: #ffff00;!important;}

         新建一个css文件在里边写一个.true的类，并且设置！important 属性，即在进行css计算的时候优先使用。

         页面代码

<h3 class="{{ activity.sign_status==1 || activity.bid_status==1}}">     {{activity.name}} <i class="icon-angle-right"></i></h3>

          这里应该关注的是class，当双括号中的值为true的时候，就使用我们上面的true类的风格，将该列表项标记为黄色。竞价列表当对应竞价在进行的时候标记为黄色类似。

          4.竞价参与者列表标号显示

           我们的列表都是通过ng-repeat来实现的，在ng-repeat中有几个属性，$index表示当前索引；$first表示是否为头元素；$middle表示是否为中间元素；$last表示是否为末尾元素。通过获取$index的值就可以进行编号了，代码如下：

 <li  ng-repeat="person in persons " >      <h3>{{$index + 1}}.&nbsp;&nbsp;&nbsp;{{person.name}}</h3>      <i>{{person.phone}}</i></li>

            因为第一个元素是0,而我们的编号要从1开始，所以用$index+1.

            5.页面刷新

           实际上在前面的报名的时候就用到了刷新，因为有新的报名的时候我们要即时刷新报名列表，竞价部分同样的要对页面信息进行更新，这里一块儿说这个。（说起这个就是痛啊。。 因为没有做到mvc的分离）

           我就勉强将这部分功能放在了Person类里作为一个静态的方法，代码如下：

Person.biding_person_list_pageRefresh = function() {    var refresh_page = document.getElementById("biding_wrapper");    if (refresh_page) {        var scope = angular.element(refresh_page).scope();        scope.$apply(function () {            var during_name = JSON.parse(localStorage['biding_bid']).name;            var result = JSON.parse(localStorage[during_name]);            result = result.reverse();            scope.persons= result;            scope.number_of_bid = result.length;        })    }};

           在这个方法内部，首先我们要通过document.getElementById方法来获取将要刷新的页面，然后向angular注册一个scope，范围就是我们在前面找到的那个页面，然后通过apply方法改变页面上显示的内容，从而达到刷新的目的。因为这个方法包含了控制层，显示层以及数据层的东西所以不是一个好的设计，但是暂时就这样吧。。。期待改进！