こんにちは。きんくまです。

BackboneのCollectionで条件が2つ以上あるようなソートをしたいときのはなしです。

例）
従業員のプロパティが
・名前
・部署
・年齢

だったときに、Collectionのソート順を

1. 部署ごと
2. 同じ部署だったら年齢の高い順

にしようとしました。

この投稿の続きを読む »

Tweet

Pocket

こんにちは。きんくまです。
またまた小ネタというかスニペットです。

前に価格の文字から数値を出したのですが
> [JavaScript] 価格の文字列から価格の数値を出したい
この逆をやろうと思いました。

例えば
1234567 -> “1,234,567”
みたいな感じに桁区切りの文字列を出したいです。

それでTypeScriptでこの前のやつと合わせてクラス化してみました。
アルゴリズム的に簡単になるように、配列を反転させて、下から数えて3桁ずつ「,」の文字を追加してるけど、きっともっと早いやり方はあると思う。
でも実用上問題ないので、このまま使うのだ。

module kk{
    export class PriceUtil{
        static PRICE_DELIMITER:string = ",";
        constructor(){

        }

        //文字列から数値をえる
        static getPriceFromString(priceStr:string):number{
            var reg:RegExp = /[^\-0-9]+/gi;
            var convertedStr:string = priceStr.replace(reg, "");
            var price:number = parseInt(convertedStr, 10);
            return price;
        }

        //数値から文字列をえる
        static getDelimitedPriceString(price:number):string{
            var isMinus:boolean = price < 0;
            if(isMinus){
                price *= -1;
            }
            var priceStr:string = price + "";
            if(priceStr.length < 1){
                return "";
            }
            var priceStrs:string[] = priceStr.split("").reverse();
            var cnt:number = 0;
            var len:number = priceStrs.length;
            while(cnt < len){
                if(cnt != 0 && cnt % 3 == 0){
                   priceStrs[cnt] = priceStrs[cnt] + PriceUtil.PRICE_DELIMITER;
                }
                cnt++;
            }
            var delimitedPriceStr = priceStrs.reverse().join("");
            if(isMinus){
                delimitedPriceStr = "-" + delimitedPriceStr;
            }
            return delimitedPriceStr;
        }
    }
}

この投稿の続きを読む »

Tweet

Pocket

こんにちは。きんくまです。

小ネタです。

価格の文字列から価格の数値を出したいときのスクリプトです。

例えば

– 1,200,300円

てな文字列があったときに、数値にしたいなーと。

var str = " - 1,200,300円 ";
var reg = /[^\-0-9]+/gi;
var newstr = str.replace(reg, "");
console.log(newstr);  //文字列 -> -1200300
var price = parseInt(newstr, 10);
console.log(price);  //数値 -> -1200300

Tweet

Pocket

こんにちは。きんくまです。

おとといBackboneのメモ記事書いたのだけど、TypeScriptに移したらうまくいかなかったので、またまたメモです。

具体的にいうと、Collectionのmodelプロパティの設定についてです。

こんなコードがあったとします。

module sample{
    export class Product extends Backbone.Model{
        name:string;
        price:number;
        defaults(){
            return {
                name:"名無しの製品"
                ,price:0
            }
        }

        initialize(){
            var defaults:any = this.defaults;
            this.name = this.get('name') || defaults.name;
            this.price = parseInt(this.get('price')) || defaults.price;
        }
    }

    export class ProductsCollection extends Backbone.Collection{
        filePath:string = "images/xxxx.png";
        model = Product; //ココの位置

        constructor(options?:any){
            super(options);
        }
    }
}
$(()=>{
    var products = new sample.ProductsCollection([
        {
            name:"炊飯器"
            ,price:8000
        }
        ,{
            name:"掃除機"
            ,price:10000
        }
    ]);
    var results = products.where({name:"炊飯器"});
    console.log(results[0]);
});

これをやるとProductsCollectionのところがうまく機能しませんでした。TypeScriptのバージョンは1.0.0.0です。
この投稿の続きを読む »

Tweet

Pocket

こんにちは。きんくまです。

Backbone.jsは本格的に使ったことがなくて、Underscore.jsのテンプレート機能だけ使ったり、テンプレートとBackboneのViewだけを組み合わせて使ったりしてました。
そしたら、結構うまくいったので、これはなかなか良い！と思い、RoutingのところもIE7でテストしたところ、普通に動いてました。（#のハッシュの方で。）
なので、今度はModelとかもからめて本格的に一度使ってみようと思いました。

で、ModelというかCollectionの入れ子構造ってどうやってやるのかと思いやってみたのが今回の記事です。

今回は、下のサイトの記事を参考にしてますので、オリジナルの記事も合わせてどうぞです。
>> Backbone.js – Structuring Nested Models and Collections

想定

会社の部署ごとのデータを作るとします。

営業部（2F）
・さとうさん（35）
・たなかさん（42）

制作部（4F）
・さくらいさん（21）
・かねこさん（52）

という会社があるとして、これをjson化するとこんな感じになりました。

js/departments.json

[
	{
		"name":"営業部"
		,"floor":"2F"
		,"employees":[
			{
				"name":"さとう"
				,"age":35
			}
			,{
				"name":"たなか"
				,"age":42
			}
		]
	}
	,{
		"name":"制作部"
		,"floor":"4F"
		,"employees":[
			{
				"name":"さくらい"
				,"age":21
			}
			,{
				"name":"かねこ"
				,"age":52
			}
		]
	}
]

で、これのModelとCollectionなのですが、

1. Model 従業員 Emloyeeを作る
2. Collection 従業員たち EmployeesCollectionを作る
3. Model 部署 Departmentを作る　（その中のプロパティのひとつがEmployeesCollection）
4. Collection 複数部署 DepartmentsCollectionを作る

という感じにひとつずつModel, Collectionを作っていけばいいみたいです。

これのjs（案件のときはTypeScriptで書いているのだけど、今回は素のjsです。）

$(function(){

var Employee = Backbone.Model.extend({
	initialize:function(){
		this.name = this.get('name');
		this.age = this.get('age');
	}
});

var EmployeesCollection = Backbone.Collection.extend({
	model:Employee
});

var Department = Backbone.Model.extend({
	initialize:function(){
		this.name = this.get('name');
		this.floor = this.get('floor');
		this.employees = new EmployeesCollection(this.get('employees'));
	}
});

var DepartmentsCollection = Backbone.Collection.extend({
	model:Department
	,url:"js/departments.json"
	,parse:function(data){
		return data;
	}
});

var departments = new DepartmentsCollection();
departments.fetch({
	success:function(){
		var result = departments.where({name:"制作部"});
		var createDiv = result[0];
		console.log(createDiv);

		var result2 = createDiv.employees.filter(function(employee){
			//30歳以上
			if(employee.age > 30){
				return true;
			}
			return false;
		});
		console.log(result2[0]);
	}
});

という感じです。あまり制限なく、ゆるく使えるBackboneは良い感じですね。

Tweet

Pocket