Peterfei

上主是我的牧者,我实在一无所缺


  • 首页

  • 归档

  • 标签

rails minitest 写mocha

发表于 2016-05-04   |   分类于 Ruby   |  
1
2
3
4
5
6
7
8
9
describe "订单号测试" do
it "规则测试" do
time = Time.now
Time.expects(:now).at_least_once.returns(time+24*60*60)
order = OrderInfo.new
order.serial_number.must_equal "#{(time+24*60*60).strftime('%Y%m%d')}000001"
end
end

expects(:now)是期望返回now的值是一天后的值非当天的值。

AngularJS 指令的 Scope (作用域)

发表于 2016-04-19   |   分类于 前端   |  

当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),还是创建一个新的自己的作用域,当然AngularJS为我们指令的scope参数提供了三种选择,分别是:false,true,{};默认情况下是false。
JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
angular.module("MyApp", [])
.controller("MyController", function ($scope) {
$scope.name = "dreamapple";
$scope.age = 20;
$scope.changeAge = function(){
$scope.age = 0;
}
})
.directive("myDirective", function () {
var obj = {
restrict: "AE",
scope: {
name: '@myName',
age: '=',
changeAge: '&changeMyAge'
},
replace: true,
template: "<div class='my-directive'>" +
"<h3>下面部分是我们创建的指令生成的</h3>" +
"我的名字是:<span ng-bind='name'></span><br/>" +
"我的年龄是:<span ng-bind='age'></span><br/>" +
"在这里修改名字:<input type='text' ng-model='name'><br/>" +
"<button ng-click='changeAge()'>修改年龄</button>" +
" </div>"
}
return obj;
});

HTML:

1
2
3
4
5
6
7
8
9
<div ng-app="MyApp">
<div class="container" ng-controller="MyController">
<div class="my-info">我的名字是:<span ng-bind="name"></span>
<br/>我的年龄是:<span ng-bind="age"></span>
<br />
</div>
<div class="my-directive" my-directive my-name="{{name}}" age="age" change-my-age="changeAge()"></div>
</div>
</div>

@
这是一个单项绑定的前缀标识符
使用方法:在元素中使用属性,好比这样<div my-directive my-name=""></div>

注意,属性的名字要用-将两个单词连接,因为是数据的单项绑定所以要通过使用{{}}来绑定数据。

=

这是一个双向数据绑定前缀标识符
使用方法:在元素中使用属性,好比这样<div my-directive age="age"></div>,注意,数据的双向绑定要通过=前缀标识符实现,所以不可以使用{{}}。

&

这是一个绑定函数方法的前缀标识符
使用方法:在元素中使用属性,好比这样<div my-directive change-my-age="changeAge()"></div>,注意,属性的名字要用-将多个个单词连接。

注意:在新创建指令的作用域对象中,使用属性的名字进行绑定时,要使用驼峰命名标准,比如下面的代码。

1
2
3
4
5
6
7
scope: {
// `myName` 就是原来元素中的`my-name`属性
name: '@myName',
age: '=',
// `changeMyAge`就是原来元素中的`change-my-age`属性
changeAge: '&changeMyAge'
}
  1. @ 当指令编译到模板的name时,就会到scope中寻找是否含有name的键值对,如果存在,就像上面那样,看到@就知道这是一个单向的数据绑定,然后寻找原来的那个使用指令的元素上(或者是指令元素本身)含有这个值的属性即my-name=,然后在父作用域查找的值,得到之后传递给模板中的name。
  2. =和&与@差不多,只不过=进行的是双向的数据绑定,不论模板还是父作用域上的属性的值发生改变都会使另一个值发生改变,而&是绑定函数而已。

rails 使用angularjs 中完成分页

发表于 2016-04-07   |   分类于 ROR   |  

rails 使用angularjs 中完成分页:
Base 插件:kaminari ,angular-paginate-anything

使用angular resource 请求列表,如:
User = $resource($scope.users_url) User.query((results)-> $scope.users = results )

实现一个完成分页controller方法,如base_controller.rb:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
class Api::BaseController < ApplicationController
# respond_to :json
private
def self.paginated_action(options = {})
before_filter(options) do |controller|
if request.headers['Range-Unit'] == 'items' &&
request.headers['Range'].present?
requested_from = nil
requested_to = nil
if request.headers['Range'] =~ /(\d+)-(\d*)/
requested_from, requested_to = $1.to_i, ($2.present? ? $2.to_i : Float::INFINITY)
end
if (requested_from > requested_to)
response.status = 416
headers['Content-Range'] = "*/#{total_items}"
render text: 'invalid pagination range'
return false
end
@kp_per_page = requested_to - requested_from + 1
@kp_page = requested_to / @kp_per_page + 1
end
end
after_filter(options) do |controller|
results = instance_variable_get("@#{controller_name}") # ex @users
if(results.length > 0)
response.status = 206
headers['Accept-Ranges'] = 'items'
headers['Range-Unit'] = 'items'
total_items = results.total_count
current_page = results.current_page
per = @kp_per_page
unless per.present?
per = 25
end
# binding.pry
requested_from = (results.current_page - 1) * per
available_to = (results.length - 1) + requested_from
headers['Content-Range'] = "#{requested_from}-#{available_to}/#{total_items < Float::INFINITY ? total_items : '*'}"
else
response.status = 204
headers['Content-Range'] = "*/0"
end
end
end
end

同时让UserController 继承BaseController:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
class UserController < Api::BaseController
paginated_action only: [:user_data]
def index
# render json:@area_user
end
def user_data
@user = User.page(@kp_page).per(@kp_per_page)
render json: @user
end
def create
L.debug "提交上来的数据是#{area_user_param}"
@user = User.new area_user_param
if @user.save
render json: @user,status: :created
else
render json:@user.errors,status: :unprocessable_entity
end
end
private
def area_user_param
# binding.pry
params.require(:user).permit(:email,:mobile_phone,:password,:password_confirmation,:truename,:card_number) rescue nil
end
end

ionic 生成动态生成右拉城市菜单

发表于 2015-12-30   |   分类于 Ionic   |  

昨天有时间想重写下之前技术部小黄写的城市右拉, 主要用的功能是ionic 自带的 ion-side-menus 和 ionicSideMenuDelegate。
配置路由:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.state('choosePovince',{
cache:false,
url:'/choose_port',
abstract:true,
templateUrl:'templates/jiesongji/choose_porvince_main.html',
controller:'JiejiCtrl'
})
/**
* 右侧滑动
* @type {应用框架自带的滑动更好解决}
*/
.state('choosePovince.city',{
cache:false,
url:'/city',
views:{
'menuContent' :
{
templateUrl: "templates/jiesongji/porvince_main.html",
controller:'JiejiCtrl'
},
'right-menu':
{
templateUrl : "templates/jiesongji/city_right.html",
controller:'JiejiCtrl'
}
},
params: {
p_obj: null
}
})

第一层路由是声明右拉的父级关联模板。
Html模板choose_porvince_main.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar bar-header top-header">
<ion-nav-buttons>
<button class="button button-clear" ng-click="goBack()"><i class="icon ion-chevron-left"></i></button>
</ion-nav-buttons>
<ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-pane>
<ion-side-menu side="right">
<header class="bar bar-header top-header">
<h1 class="title">选择城市</h1>
</header>
<ion-content class="has-header">
<ion-nav-view name="right-menu">
</ion-nav-view>
</ion-content>
</ion-side-menu>
</ion-side-menus>

第二层路由声明右拉的模板与主模板。
Html 模板 porvince_main.html:

1
2
3
4
5
6
7
8
9
10
11
12
<ion-view title="选择城市">
<ion-content>
<ion-list>
<ion-item ng-click="right_menu(province.pro_id);" ng-repeat="province in ProvinceList">
<!-- <ion-item ng-click="show_province();"> -->
<span>{{province.province}}</span>
</ion-item>
</ion-list>
</ion-content>
</ion-view>

Html 模板 city_right.html

1
2
3
4
<ion-item ng-repeat="city in citys" style="height:50px;">
<span>{{city.city_name}}</span>
<span></span>
</ion-item>

Javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/**
* [show_province 加载省份]
* @return {[type]} [description]
*/
$scope.show_province = function(){
var param = {
code: "25c85dd791fd81f528eb550d6c107dcf"
};
chaXunProvinceFactory.getChaXunProvince(param).then(function(callback) {
if (callback.status == 200) {
// debugger
$state.go('choosePovince.city',{p_obj:callback.data.content});
// $scope.ProvinceList = callback.data.content;
}
});
}
/**
* 通过路由的对象传值,渲染ProvinceList显示数据
* @param {[type]} angular.isObject($stateParams.p_obj) [description]
* @return {[type]} [description]
*/
if (angular.isObject($stateParams.p_obj)) {
$scope.ProvinceList=$stateParams.p_obj;
};
/**
* 这里是重点,当点击事件发生时,向父级scope对象发送监听对象请求,传值。
* @param {[type]} obj [description]
* @return {[type]} [description]
*/
$scope.right_menu = function(obj){
$ionicSideMenuDelegate.toggleRight();
$scope.$emit('cities',obj);
}
/**
* 父页面监听,如果接收到点击请求,则通过接口获取动态数据,同时赋值给$scope对象。
* @param {[type]} e [description]
* @param {Object} d){ var param [description]
* @return {[type]} [description]
*/
$scope.$on('cities',function(e,d){
var param = {
code: "25c85dd791fd81f528eb550d6c107dcf",
pro_id: d
};
chaXunProvinceFactory.getChaXunCity(param).then(function(callback) {
if (callback.status == 200) {
$scope.citys = callback.data.content;
}
});
});

最终效果:
效果图
效果图

ionic 页面对象传值

发表于 2015-12-28   |   分类于 Ionic   |  

ionic 项目里常常遇到页面间传值的情况,一般是这样的:

1
2
3
4
5
6
7
8
9
.state('tab.chat-detail', {
url: '/chats/:chatId',
views: {
'tab-chats': {
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
})

但遇到对象时,应做如下处理:

1
2
3
4
5
6
7
$stateProvider.state('users', {
url: '/users',
controller: 'UsersCtrl',
params: {
obj: null
}
})

1
2
3
function UserCtrl($stateParams) {
conrole.log($stateParams);
}
1
$state.go('users', {obj:yourObj});
1…789…16
peterfei

peterfei

peterfei|技术|上主是我的牧者

77 日志
14 分类
62 标签
RSS
github
© 2023 peterfei
由 Hexo 强力驱动
主题 - NexT.Mist