Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Knockout.js x linq.js のご紹介

1.529 visualizaciones

Publicado el

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

Publicado en: Tecnología
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

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 ご清聴ありがとうございました

×