knockout.js × linq.js
のご紹介
2014/01/18 KnockoutJS勉強会 in Kansai #1
@kamukiriri
自己紹介
HN:

kamu(@kamukiriri)

仕事:

元.NET系業務システム開発者
現iOSアプリ開発者(@ subakolab)

プログラミング暦:
C#, Objective-C, Javascript, Ruby,
PH...
はじめに

みなさん配列をループ処理してますか?
ハッシュをループ処理してますか?
for 文書いてますか?
はじめに

書かざるを得ない!
つらい!
(主にハッシュ)
はじめに
knockout.jsはUI周りのフレームワーク
→当然ながらコレクション周りの操作は専門外
ko.utils.arrayXXX 系の便利メソッドも用意さ
れていますが使い勝手がいまひとつ
本題
そこで今回ご紹介するのが・・・

linq.js
http://linqjs.codeplex.com/
本題
linq.jsって何?
・ Microsoftの.NET Framewarkに組み込まれて
いるLinq(Linq to Objects)のjavascript移植版

・ Linqとは、RubyのEnumerableやJava 8の
S...
本題
linq.jsのいいところ(内側)
・ ハッシュを手軽に扱える
・ ArrayやObjectをprototype拡張できるので
標準機能と併用できる

・ 文字列からfunctionを作れる(文字列ラムダ)
※ただし下2つはver3以降
重要

ハッシュを手軽に扱える!
重要
javascriptのハッシュ(Object)のつらさ
・ 列挙処理が書き難い
・ 列挙処理でハマる
・ knockout.jsのforeach binding で使えない
重要
linq.jsをつかうと・・・(ViewModel)
var MainViewModel = function(){
var self = this;
var hash = {"a001": "javascript", "a002": "...
重要
linq.jsをつかうと・・・(View)
<body>
<div data-bind="foreach: list">
<span data-bind="text: key"></span>:
<span data-bind="text...
さいごに

みなさんlinq.js使いましょう!
knockout.js × linq.js

ご清聴ありがとうございました
Upcoming SlideShare
Loading in …5
×

Knockout.js x linq.js のご紹介

1,316 views

Published on

2014/01/18 KnockoutJS勉強会 in Kansai #1

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,316
On SlideShare
0
From Embeds
0
Number of Embeds
435
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Knockout.js x linq.js のご紹介

  1. 1. knockout.js × linq.js のご紹介 2014/01/18 KnockoutJS勉強会 in Kansai #1 @kamukiriri
  2. 2. 自己紹介 HN: kamu(@kamukiriri) 仕事: 元.NET系業務システム開発者 現iOSアプリ開発者(@ subakolab) プログラミング暦: C#, Objective-C, Javascript, Ruby, PHP, VB.NET,VB6, VBA, VBS, etc...
  3. 3. はじめに みなさん配列をループ処理してますか? ハッシュをループ処理してますか? for 文書いてますか?
  4. 4. はじめに 書かざるを得ない! つらい! (主にハッシュ)
  5. 5. はじめに knockout.jsはUI周りのフレームワーク →当然ながらコレクション周りの操作は専門外 ko.utils.arrayXXX 系の便利メソッドも用意さ れていますが使い勝手がいまひとつ
  6. 6. 本題 そこで今回ご紹介するのが・・・ linq.js http://linqjs.codeplex.com/
  7. 7. 本題 linq.jsって何? ・ Microsoftの.NET Framewarkに組み込まれて いるLinq(Linq to Objects)のjavascript移植版 ・ Linqとは、RubyのEnumerableやJava 8の Stream API のようなもの(厳密には違う) →こういう風に書けるやつ(例はRuby) quadruple = array.map{|x| x *2 }.map{|x| x *2 }
  8. 8. 本題 linq.jsのいいところ(内側) ・ ハッシュを手軽に扱える ・ ArrayやObjectをprototype拡張できるので 標準機能と併用できる ・ 文字列からfunctionを作れる(文字列ラムダ) ※ただし下2つはver3以降
  9. 9. 重要 ハッシュを手軽に扱える!
  10. 10. 重要 javascriptのハッシュ(Object)のつらさ ・ 列挙処理が書き難い ・ 列挙処理でハマる ・ knockout.jsのforeach binding で使えない
  11. 11. 重要 linq.jsをつかうと・・・(ViewModel) var MainViewModel = function(){ var self = this; var hash = {"a001": "javascript", "a002": "ruby", "b001": "C#"}; //1.べたなやつ self.list = ko.observableArray(Enumerable.from(hash).toArray()); //2.prototype拡張 //Enumerable.Utils.extendTo(Object); //self.list = ko.observableArray(hash.toArray()); }
  12. 12. 重要 linq.jsをつかうと・・・(View) <body> <div data-bind="foreach: list"> <span data-bind="text: key"></span>: <span data-bind="text: value"></span><br /> </div> </body> (出力結果) a001: javascript a002: ruby b001: C#
  13. 13. さいごに みなさんlinq.js使いましょう!
  14. 14. knockout.js × linq.js ご清聴ありがとうございました

×