学习敏捷开发(trello)之party_bid卡片2总结

一.第二张卡的要求

	1.活动开始后，能够接收短信，并统计报名信息。
	2.根据当前活动的状态，分别返回不同的信息。
	3.能够实现显示新增的报名人
	4.当前正在进行的活动为黄色

二.相关函数功能的分析

2.1短信接收函数

说明，这里我们在调试的时候先不用在真实手机环境中调试，可以先在控制台调试！

var native_accessor = {
    send_sms: function (phone, message) {
        // native_access.send_sms({"receivers":[{"name":'name', "phone":phone}]}, {"message_content":message});
      console.log(phone,message);
    },

    receive_message: function (json_message) {
        if (typeof this.process_received_message === 'function') {
            this.process_received_message(json_message);
        }
    },
//收到短信之后的处理函数
    process_received_message: function (json_message) {
        var message = new Message(json_message);
        message.isRightmessage();
    }
};
function notify_message_received(message_json) {
    native_accessor.receive_message(message_json);
}

在控制台中，我们按照一定的格式输入，

 notify_message_received(...)

这样，在发送的时候，就能够交给notify_message_received函数处理了，最终我们的入口就是

process_received_message: function (json_message) 

而出口则是

native_accessor

在这里，我们先使用控制台console.log打印出返回信息！

2.1短信处理(大小写空格)

这里我们使用js中的正则表达式来处理短信内容！

function Message (json_message) {
    var result_name_origin=json_message.messages[0].message.replace(/\s/g,'');
    this.type= result_name_origin.toLowerCase().substring(0,2);
    this.name= result_name_origin.toLowerCase().slice(2);
    this.phone = json_message.messages[0].phone;
}

在message这个model中，使用replace(/\s/g,")去掉字符串中的空格！
利用toLowCase()将所有的字母转换成小写字母，方便后面判断
利用slice截取从2开始一直到结束的部分，得到短信中的报名人的名字
然后，利用实例方法，对处理后的短信内容进行进一步处理

Message.prototype.isRightmessage=function(json_message){

	if(this.type=="bm"){
        var Signupuser = new SignUpInfo(this.name,this.phone);
        Signupuser.back_message();

	}
};

2.3活动报名开始结束按钮的状态切换

  <div ng-switch="signup_button_status">
    <button ng-disabled="false" ng-click="start_activity_btn()" ng-switch-when="unstart" class="btn btn-primary header-right">开始</button>
    <button ng-disabled="false" ng-click="start_activity_btn()" ng-switch-when="start" class="btn btn-primary header-right">结束</button>
    <button ng-disabled="true" ng-click="start_activity_btn()" ng-switch-when="end" class="btn btn-primary header-right">结束</button>
    <button ng-disabled="true" ng-click="start_activity_btn()" ng-switch-default="" class="btn btn-primary header-right">开始</button>
  </div>

这里，我们使用ng-switch切换按钮的各种状态
ng-switch-when分别匹配返回的参数，当参数相同时，就显示匹配到的button，当所以都没用匹配到的时候，就使用ng-switch-default默认的button！

2.4动态刷新

function Page_Refresh () {
	var refresh_page = <span style="font-family: Arial, Helvetica, sans-serif;">document.getElementById("refresh_user_num");</span>
    if (refresh_page) {  
        var scope = angular.element(refresh_page).scope();  
        scope.$apply(function () {
        	var during_name= JSON.parse(localStorage['current_activity']).name;
        	var result=JSON.parse(localStorage[during_name]);
<pre name="code" class="javascript">            scope.users_data= result;
            scope.user_num='('+result.length+'人'+')';

}) } }

当在活动报名页面，有人报名的时候，需要动态显示。当接收到报名短信后，调用Page_Refresh()！

其中refresh_user_num为需要刷新页面元素的id。

 scope.users_data= result;
 scope.user_num='('+result.length+'人'+')';

这两条语句应该放到controller中！因为我们采用的是MVC编程思想！

2.5使用正在报名的活动背景为黄色

在我们自己定义的css样式中新增

.start{
    background: yellow !important
}

并将该css文件引入到index中

 <li ng-repeat="activity in activity_names track by $index" ng-click="choose_activity(activity)" class="clearfix btn-default">
      <h3 class="{{activity.status}}">{{activity.name}}</h3><i class="icon-angle-right"></i>
</li>

ng-repeat在上一篇中已经介绍，当匹配到该活动的status状态为start的时候，该活动就会优先显示黄色！