Enviar pesquisa
Carregar
How do you like knockout?
•
4 gostaram
•
2,713 visualizações
Narami Kiyokura
Seguir
『合同勉強会 in 大都会岡山 -2014 Winter-』の同名のセッションの資料 http://gbdaitokai.doorkeeper.jp/events/15289
Leia menos
Leia mais
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 64
Baixar agora
Baixar para ler offline
Recomendados
ASP.NET "NOW" and "NEXT"
ASP.NET "NOW" and "NEXT"
Narami Kiyokura
どうなる?Visual Studioの クライアントサイド web開発の今後
どうなる?Visual Studioの クライアントサイド web開発の今後
Narami Kiyokura
SQL Server のプロジェクト指向オフライン データベース開発を採用してみた話
SQL Server のプロジェクト指向オフライン データベース開発を採用してみた話
Narami Kiyokura
無償版Visual StudioでいろいろWeb開発
無償版Visual StudioでいろいろWeb開発
Narami Kiyokura
WordPress開発の最新事情
WordPress開発の最新事情
Takayuki Miyauchi
フロントエンド初学者がSPAに手を出してみた
フロントエンド初学者がSPAに手を出してみた
Kei Yagi
軽量フレームワークNancy
軽量フレームワークNancy
Narami Kiyokura
WordCamp Tokyo 2018 by ocws
WordCamp Tokyo 2018 by ocws
kouki okuda
Recomendados
ASP.NET "NOW" and "NEXT"
ASP.NET "NOW" and "NEXT"
Narami Kiyokura
どうなる?Visual Studioの クライアントサイド web開発の今後
どうなる?Visual Studioの クライアントサイド web開発の今後
Narami Kiyokura
SQL Server のプロジェクト指向オフライン データベース開発を採用してみた話
SQL Server のプロジェクト指向オフライン データベース開発を採用してみた話
Narami Kiyokura
無償版Visual StudioでいろいろWeb開発
無償版Visual StudioでいろいろWeb開発
Narami Kiyokura
WordPress開発の最新事情
WordPress開発の最新事情
Takayuki Miyauchi
フロントエンド初学者がSPAに手を出してみた
フロントエンド初学者がSPAに手を出してみた
Kei Yagi
軽量フレームワークNancy
軽量フレームワークNancy
Narami Kiyokura
WordCamp Tokyo 2018 by ocws
WordCamp Tokyo 2018 by ocws
kouki okuda
オレたちとVisual Studioとの関係を話そう
オレたちとVisual Studioとの関係を話そう
Mitsuhito Ishino
WordPress JSON REST API 〜さらばPHP、さらばWordPressテーマ
WordPress JSON REST API 〜さらばPHP、さらばWordPressテーマ
Kazue Igarashi
[社内勉強会]SPAのすすめ
[社内勉強会]SPAのすすめ
hirooooo
軽量ASP.NETフレームワークNancy
軽量ASP.NETフレームワークNancy
Narami Kiyokura
Web制作者が知っておきたいアクセシビリティ最新動向
Web制作者が知っておきたいアクセシビリティ最新動向
Mitsue-Links Co.,Ltd. Accessibility Department
Media Assembly Kit
Media Assembly Kit
Hiromichi Koga
Spa のための web サーバ構築ノウハウ
Spa のための web サーバ構築ノウハウ
Kazuhiro Kotsutsumi
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化
Toshio Ehara
20121215
20121215
小野 修司
使ってみよう、WebMatrix3
使ってみよう、WebMatrix3
Narami Kiyokura
今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました
Mitsuru Ogawa
three.jsによる一歩進めたグラフィカルな表現
three.jsによる一歩進めたグラフィカルな表現
Kei Yagi
ASP.NET SPA開発をはじめよう~今と未来とステップアップ
ASP.NET SPA開発をはじめよう~今と未来とステップアップ
慎一 古賀
Azure Appservice WebAppsでWordPressサイトを構築すると運用が劇的にラクになる話
Azure Appservice WebAppsでWordPressサイトを構築すると運用が劇的にラクになる話
典子 松本
なぜ、サイボウズでアクセシビリティなのか?
なぜ、サイボウズでアクセシビリティなのか?
力也 伊原
WP-APIを使ってみよう&No PHPテーマという考え方
WP-APIを使ってみよう&No PHPテーマという考え方
Hidetaka Okamoto
WorcCamp Kansai 2015 LT大会
WorcCamp Kansai 2015 LT大会
Koji Asaga
インフラ知識ゼロのWebデザイナーがAzureWebSitesを使ってみた話
インフラ知識ゼロのWebデザイナーがAzureWebSitesを使ってみた話
典子 松本
a-blog cmsのインポート機能を使いこなす
a-blog cmsのインポート機能を使いこなす
Seiko Kuchida
最近のASP.NET事情2013Winter
最近のASP.NET事情2013Winter
Narami Kiyokura
TFS超入門。いつやるの。今でしょ
TFS超入門。いつやるの。今でしょ
Takuya Kawabe
Gulp ことはじめ
Gulp ことはじめ
Kyohei Morimoto
Mais conteúdo relacionado
Mais procurados
オレたちとVisual Studioとの関係を話そう
オレたちとVisual Studioとの関係を話そう
Mitsuhito Ishino
WordPress JSON REST API 〜さらばPHP、さらばWordPressテーマ
WordPress JSON REST API 〜さらばPHP、さらばWordPressテーマ
Kazue Igarashi
[社内勉強会]SPAのすすめ
[社内勉強会]SPAのすすめ
hirooooo
軽量ASP.NETフレームワークNancy
軽量ASP.NETフレームワークNancy
Narami Kiyokura
Web制作者が知っておきたいアクセシビリティ最新動向
Web制作者が知っておきたいアクセシビリティ最新動向
Mitsue-Links Co.,Ltd. Accessibility Department
Media Assembly Kit
Media Assembly Kit
Hiromichi Koga
Spa のための web サーバ構築ノウハウ
Spa のための web サーバ構築ノウハウ
Kazuhiro Kotsutsumi
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化
Toshio Ehara
20121215
20121215
小野 修司
使ってみよう、WebMatrix3
使ってみよう、WebMatrix3
Narami Kiyokura
今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました
Mitsuru Ogawa
three.jsによる一歩進めたグラフィカルな表現
three.jsによる一歩進めたグラフィカルな表現
Kei Yagi
ASP.NET SPA開発をはじめよう~今と未来とステップアップ
ASP.NET SPA開発をはじめよう~今と未来とステップアップ
慎一 古賀
Azure Appservice WebAppsでWordPressサイトを構築すると運用が劇的にラクになる話
Azure Appservice WebAppsでWordPressサイトを構築すると運用が劇的にラクになる話
典子 松本
なぜ、サイボウズでアクセシビリティなのか?
なぜ、サイボウズでアクセシビリティなのか?
力也 伊原
WP-APIを使ってみよう&No PHPテーマという考え方
WP-APIを使ってみよう&No PHPテーマという考え方
Hidetaka Okamoto
WorcCamp Kansai 2015 LT大会
WorcCamp Kansai 2015 LT大会
Koji Asaga
インフラ知識ゼロのWebデザイナーがAzureWebSitesを使ってみた話
インフラ知識ゼロのWebデザイナーがAzureWebSitesを使ってみた話
典子 松本
a-blog cmsのインポート機能を使いこなす
a-blog cmsのインポート機能を使いこなす
Seiko Kuchida
最近のASP.NET事情2013Winter
最近のASP.NET事情2013Winter
Narami Kiyokura
Mais procurados
(20)
オレたちとVisual Studioとの関係を話そう
オレたちとVisual Studioとの関係を話そう
WordPress JSON REST API 〜さらばPHP、さらばWordPressテーマ
WordPress JSON REST API 〜さらばPHP、さらばWordPressテーマ
[社内勉強会]SPAのすすめ
[社内勉強会]SPAのすすめ
軽量ASP.NETフレームワークNancy
軽量ASP.NETフレームワークNancy
Web制作者が知っておきたいアクセシビリティ最新動向
Web制作者が知っておきたいアクセシビリティ最新動向
Media Assembly Kit
Media Assembly Kit
Spa のための web サーバ構築ノウハウ
Spa のための web サーバ構築ノウハウ
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化
20121215
20121215
使ってみよう、WebMatrix3
使ってみよう、WebMatrix3
今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました
three.jsによる一歩進めたグラフィカルな表現
three.jsによる一歩進めたグラフィカルな表現
ASP.NET SPA開発をはじめよう~今と未来とステップアップ
ASP.NET SPA開発をはじめよう~今と未来とステップアップ
Azure Appservice WebAppsでWordPressサイトを構築すると運用が劇的にラクになる話
Azure Appservice WebAppsでWordPressサイトを構築すると運用が劇的にラクになる話
なぜ、サイボウズでアクセシビリティなのか?
なぜ、サイボウズでアクセシビリティなのか?
WP-APIを使ってみよう&No PHPテーマという考え方
WP-APIを使ってみよう&No PHPテーマという考え方
WorcCamp Kansai 2015 LT大会
WorcCamp Kansai 2015 LT大会
インフラ知識ゼロのWebデザイナーがAzureWebSitesを使ってみた話
インフラ知識ゼロのWebデザイナーがAzureWebSitesを使ってみた話
a-blog cmsのインポート機能を使いこなす
a-blog cmsのインポート機能を使いこなす
最近のASP.NET事情2013Winter
最近のASP.NET事情2013Winter
Destaque
TFS超入門。いつやるの。今でしょ
TFS超入門。いつやるの。今でしょ
Takuya Kawabe
Gulp ことはじめ
Gulp ことはじめ
Kyohei Morimoto
[予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦!
[予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦!
Jun-ichi Sakamoto
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトーク
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトーク
Jun-ichi Sakamoto
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
Shumpei Shiraishi
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクト
Shumpei Shiraishi
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
Shumpei Shiraishi
20130921レジュメ2
20130921レジュメ2
Shumpei Shiraishi
Introduction of "MarkdownPresenter"
Introduction of "MarkdownPresenter"
Jun-ichi Sakamoto
Reactive Programming
Reactive Programming
maruyama097
CLR/H#74 LT IT勉強会発表用イチオシツール
CLR/H#74 LT IT勉強会発表用イチオシツール
Jun-ichi Sakamoto
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
Akira Inoue
20140823 LL diver Angular.js で構築した note に関して
20140823 LL diver Angular.js で構築した note に関して
Shoei Takamaru
AngularJS 2.0 Jumpstart
AngularJS 2.0 Jumpstart
Filipe Falcão
はじめにことばありき
はじめにことばありき
Shumpei Shiraishi
秒速一億円
秒速一億円
Shumpei Shiraishi
最近、リアルタイムWebが面白い
最近、リアルタイムWebが面白い
Narami Kiyokura
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
Shumpei Shiraishi
WebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探る
Shumpei Shiraishi
TypeScript And ALM
TypeScript And ALM
Kazushi Kamegawa
Destaque
(20)
TFS超入門。いつやるの。今でしょ
TFS超入門。いつやるの。今でしょ
Gulp ことはじめ
Gulp ことはじめ
[予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦!
[予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦!
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトーク
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトーク
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクト
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
20130921レジュメ2
20130921レジュメ2
Introduction of "MarkdownPresenter"
Introduction of "MarkdownPresenter"
Reactive Programming
Reactive Programming
CLR/H#74 LT IT勉強会発表用イチオシツール
CLR/H#74 LT IT勉強会発表用イチオシツール
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
20140823 LL diver Angular.js で構築した note に関して
20140823 LL diver Angular.js で構築した note に関して
AngularJS 2.0 Jumpstart
AngularJS 2.0 Jumpstart
はじめにことばありき
はじめにことばありき
秒速一億円
秒速一億円
最近、リアルタイムWebが面白い
最近、リアルタイムWebが面白い
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
WebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探る
TypeScript And ALM
TypeScript And ALM
Semelhante a How do you like knockout?
はじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
IoT Edge and Serverless playground with Node.js ~ IoT EdgeとサーバレスをNode.jsで遊ぶ実験ノート
IoT Edge and Serverless playground with Node.js ~ IoT EdgeとサーバレスをNode.jsで遊ぶ実験ノート
Kazumi IWANAGA
データマイニング+WEB勉強会資料第6回
データマイニング+WEB勉強会資料第6回
Naoyuki Yamada
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
Yasuhito Yabe
20160215 04 java ee7徹底入門 jbatch
20160215 04 java ee7徹底入門 jbatch
Jun Inose
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
Toshiro Shimizu
Oracleがnode.jsをやり始めたというのだが!
Oracleがnode.jsをやり始めたというのだが!
Hiroshi Hayakawa
Klabの梅雨対策
Klabの梅雨対策
Hideyuki TAKEI
JAWSDAYS2016 Technical Deep DIVE
JAWSDAYS2016 Technical Deep DIVE
陽平 山口
自社クラウドサービスをAnsibleで作った話
自社クラウドサービスをAnsibleで作った話
Watanabe Shunji
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
Naoya Ito
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
Yuta Matsumura
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
normalian
JavaScriptでいいじゃなイカ
JavaScriptでいいじゃなイカ
Yuuichi Akagawa
Introduction for Browser Side MVC
Introduction for Browser Side MVC
Ryunosuke SATO
GUI アプリケーションにおける MVC
GUI アプリケーションにおける MVC
Yu Nobuoka
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
OCHI Shuji
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Akira Inoue
JavaScriptCore.framework の普通な使い方 #cocoa_kansai
JavaScriptCore.framework の普通な使い方 #cocoa_kansai
Tomohiro Kumagai
iPhoneアプリ開発の歩き方〜Swift編〜
iPhoneアプリ開発の歩き方〜Swift編〜
Yusuke SAITO
Semelhante a How do you like knockout?
(20)
はじめよう Backbone.js
はじめよう Backbone.js
IoT Edge and Serverless playground with Node.js ~ IoT EdgeとサーバレスをNode.jsで遊ぶ実験ノート
IoT Edge and Serverless playground with Node.js ~ IoT EdgeとサーバレスをNode.jsで遊ぶ実験ノート
データマイニング+WEB勉強会資料第6回
データマイニング+WEB勉強会資料第6回
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
20160215 04 java ee7徹底入門 jbatch
20160215 04 java ee7徹底入門 jbatch
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
Oracleがnode.jsをやり始めたというのだが!
Oracleがnode.jsをやり始めたというのだが!
Klabの梅雨対策
Klabの梅雨対策
JAWSDAYS2016 Technical Deep DIVE
JAWSDAYS2016 Technical Deep DIVE
自社クラウドサービスをAnsibleで作った話
自社クラウドサービスをAnsibleで作った話
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
JavaScriptでいいじゃなイカ
JavaScriptでいいじゃなイカ
Introduction for Browser Side MVC
Introduction for Browser Side MVC
GUI アプリケーションにおける MVC
GUI アプリケーションにおける MVC
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
JavaScriptCore.framework の普通な使い方 #cocoa_kansai
JavaScriptCore.framework の普通な使い方 #cocoa_kansai
iPhoneアプリ開発の歩き方〜Swift編〜
iPhoneアプリ開発の歩き方〜Swift編〜
Mais de Narami Kiyokura
Windows ストアアプリをHTMLで作成する
Windows ストアアプリをHTMLで作成する
Narami Kiyokura
Visual Studioで始めるTypeScript開発入門
Visual Studioで始めるTypeScript開発入門
Narami Kiyokura
脱・Excelホーガンシのために、その1
脱・Excelホーガンシのために、その1
Narami Kiyokura
ADO.NETとORMとMicro-ORM -dapper dot netを使ってみた
ADO.NETとORMとMicro-ORM -dapper dot netを使ってみた
Narami Kiyokura
よろしい、ならばMicro-ORMだ
よろしい、ならばMicro-ORMだ
Narami Kiyokura
WebMatrixで遊ぶ-ゆるふわGitHubページ
WebMatrixで遊ぶ-ゆるふわGitHubページ
Narami Kiyokura
TypeScript超入門
TypeScript超入門
Narami Kiyokura
NuGetの社内利用のススメ
NuGetの社内利用のススメ
Narami Kiyokura
IMESupport for Sublime Text 2 / ConvertToUTF8の紹介
IMESupport for Sublime Text 2 / ConvertToUTF8の紹介
Narami Kiyokura
Mais de Narami Kiyokura
(9)
Windows ストアアプリをHTMLで作成する
Windows ストアアプリをHTMLで作成する
Visual Studioで始めるTypeScript開発入門
Visual Studioで始めるTypeScript開発入門
脱・Excelホーガンシのために、その1
脱・Excelホーガンシのために、その1
ADO.NETとORMとMicro-ORM -dapper dot netを使ってみた
ADO.NETとORMとMicro-ORM -dapper dot netを使ってみた
よろしい、ならばMicro-ORMだ
よろしい、ならばMicro-ORMだ
WebMatrixで遊ぶ-ゆるふわGitHubページ
WebMatrixで遊ぶ-ゆるふわGitHubページ
TypeScript超入門
TypeScript超入門
NuGetの社内利用のススメ
NuGetの社内利用のススメ
IMESupport for Sublime Text 2 / ConvertToUTF8の紹介
IMESupport for Sublime Text 2 / ConvertToUTF8の紹介
How do you like knockout?
1.
How do you
like knockout? 合同勉強会in 大都会岡山-2014 Winter- 2014/12/13 OITEC きよくらならみ
2.
自己紹介 •きよくらならみ –@kiyokura
–kiyokura.hateblo.jp •NET系の開発やWebアプリ開発 –Microsoft MVP for ASP.NET/IIS •近況:#R社
3.
コミュニティ紹介 •Okayama IT
Engineers Community –OITEC •.NET系・MS系のテクノロジが多い? –特にしばりはないので、色々welcome •http://oitec.vbstation.net/
4.
本日のお品書き •knockout.jsのぼんやりした説明 •はじめてのばいんでぃんぐ
•バインディングの基本 •その他、色々 •もうちょっとだけ 実用的かもしれない例 •まとめ
5.
knockout.jsのぼんやりした説明
6.
Declarative Bindings Automatic
UI Refresh Dependency Tracking Templating SimplifydynamicJavaScriptUIs withthe Model-View-ViewModelpattern
7.
なんのこっちゃ
8.
knockout.jsとは •JavaScriptのライブラリ –フレームワークとも言われるが…
•AngularJSなどと違いフルスタックではない •コンセプト –宣言型バインディング –自動的なUIの更新 –依存性の追跡 –テンプレート
9.
knockout.jsとは •http://knockoutjs.com/ •OSS
–MITライセンス –https://github.com/knockout
10.
こんなことができる(ようになる) •動的なUIをシンプルに構築 –JSとHTMLの依存関係を整理しやすく
–MVVMパターンの導入も視野に
11.
非機能的な特徴 •他のライブラリに依存しない –取り回しが良い
•機能がシンプル –学習コストが低い •導入のハードルが全体的に低い –「一部だけに使用」にも抵抗が少ない –サーバサイドの言語・フレームワークを選ばない –古いブラウザでも動作
12.
導入方法 •取り込み –webからDL
•公式サイトorgithub –bower •bower install knockout –NuGet •Install-Package knockoutjs •CDN –https://cdnjs.com/ –http://www.asp.net/ajax/cdn
13.
四の五の言ってもあれなので •knockoutの2大機能を中心に紹介
14.
はじめてのばいんでぃんぐ
15.
knockout 二大機能の一つ •「バインディング」をまずは軽く紹介
16.
バインディングとは •バインディング(binding) –縛りつける・結びつける
•UIとJSのオブジェクトを結びつける –「代入とは違うのだよ、代入とは!」 •バインド=宣言的 •代入=手続的
17.
例 varuser =
{ name: "きよくら", age: 20 }; このオブジェクトの値を… こんなHTMLに設定したい…とする
18.
data-bind属性 •data-*属性を利用 •「なにをどこにバインドするか」”宣言”
–なにを:JSのオブジェクト –どこに:どの属性 data-bind="value:name"
19.
ko.applyBindings() •HTMLと紐づけるオブジェクトを用意 •ko.applyBindings()で紐づけを実行
ko.applyBindings(user);
20.
knockoutによるバインディング <scripttype="text/javascript"> $(function()
{ varuser = { name: "kiyokura", age: 20 }; ko.applyBindings(user); }); </script> <p> name:<inputtype="text"data-bind="value:name" /><br/> age:<inputtype="text"data-bind="value:age" /><br/> </p>
21.
onemore thing, •これは「単方向」バインディング
–Not “One time” , but “One way” •UI側の更新が自動的にオブジェクトへ
22.
JS側のオブジェクトの値を確認してみる $("#btnCkeck").click( function()
{ alert(user.age); }); <inputtype="button" value="check"id="btnCkeck"/>
23.
JS側のオブジェクトの値を確認してみる
24.
単方向バインディング •オブジェクトをHTMLに結びつける –“代入”ではなく”宣言”
–UIの変更が自動的にオブジェクトへ •依存関係がシンプルに –JSからHTML(DOM)参照が消滅 •実際は0にならないケースあるが 間違いなく減る
25.
ごくシンプルな機能だが •これだけでも有効な場合がある –サーバサイドの比重が大きい場合など、
JSのコード量を減らせる(可能性) –HTMLとJSの依存関係を減らせる •生産性UP&保守性UP につながる可能性
26.
jQueryでやると… <inputtype="text"id="name"/> <inputtype="text"id="age"/>
varuser = { name: "kiyokura", age: 20 }; $("#name").val(user.name); $("#age").val(user.age);
27.
バインディングの基本
28.
「監視」を絡めたバインディング •二大機能のもう一方、「監視」 •バインディングの真骨頂(たぶん)
29.
Observable による状態の監視 varuser
= { name:ko.observable("kiyokura"), age: ko.observable(20) };
30.
Observable による状態の監視 varuser
= { name:ko.observable("kiyokura"), age: ko.observable(20) };
31.
オブジェクトを操作してみる $("#btnYounger").click(function() {
varage = user.age(); user.age(age -1); }); <inputtype="button" id="btnYounger"value="若返り" />
32.
オブジェクトの変更がUIへ
33.
双方向バインディング •「監視」という機能 –observableオブジェクトでラップ
•オブジェクトを監視し、UIに通知 –UIを自動更新 ko.observable() ko.observableArray()
34.
ついでに、もうちょっと •バインドできるのは“値”だけではない •その一例を少しだけ
35.
“計算結果”をバインド varUser =
function () { varself = this; self.name = ko.observable("kiyokura"); self.age= ko.observable(20); self.message= ko.computed( function() { returnself.name() + ", "+ self.age() + "さい"; }); }; varuser = new User(); <spandata-bind="text:message"></span>
36.
イベントにメソッドをバインド self.toYounger= function()
{ varage = user.age(); user.age(age -1); }; <inputtype="button"value="若返り" data-bind="click:toYounger" />
37.
38.
双方向バインド •“監視”と”バインド”のko2大機能で •オブジェクトとUI双方向で監視・更新
•“状態”と”コマンド”可能な機構 –これを生かしてPDSの観点で設計・実装 •それ、MVVMいけるんじゃね
39.
その他、色々
40.
いろんなバインディング •テキストとか表現的な –visible
–text –html –css –style –attr
41.
いろんなバインディング •制御構文的な –foreach
–if –ifnot –with –component
42.
いろんなバインディング •フォーム部品関係 –click
–event –submit –enable –disable –value
43.
いろんなバインディング •フォーム部品関係 –textInput
–hasFocus –checked –options –selectedOptions –uniqueName
44.
いろんなバインディング •テンプレーティング –template
45.
カスタマイズや拡張 •カスタム・バインディング –バインディングをカスタマイズ可能
•extend –拡張メソッド(みたいな感じ)
46.
もうちょっとだけ 実用的かもしれない例
47.
もうちょっとだけ実用的かもしれない例 •例:json形式のデータを出し入れ •例:WebStorageへの保存機能を後付
48.
例:json形式のデータを出し入れ •先ほどまでの例だと… 「実際つかえるの?」
と思うかもしれません •ko.observableでイチイチラップしたオ ブジェクトを毎回定義するの? •大丈夫、無問題。
49.
ko.mappingプラグイン •オブジェクトやJSONを ko.observableでラップされた
オブジェクトを生成する varjsData= {name: "foo",age:20}; varvm= ko.mapping.fromJS(jsData);
50.
ko.mappingプラグイン •逆にプレーンなオブジェクトにマッピン グしなおすことも可能
varjson= ko.mapping.toJSON(vm);
51.
なので…こんなことも割と楽に可能 •ajaxでデータを取得してモデル作成 •モデルをJSON化してajaxで送信
52.
例:WebStorageへの保存機能を後付 •koは「ちょっとココだけ使う」ことも 比較的楽
•その一例 –https://github.com/kiyokura/komappingdemo
53.
何の変哲もないwebフォーム •「localStorageに一時保存させて」 と言われたたら?
<form action="register.php" method="post"> <p> 姓: <input type="text" name="lastName" /> 名: <input type="text" name="firstName" /><br/> tel: <input type="text" name="tel" /><br/> e-mail: <input type="text" name="email" /><br/> <hr/> <input type="submit" value="登録" /> </p> </form>
54.
それ、knockoutで JSからDOMを見てるが、こんな パターンなら別にいいんじゃな
いかと思う(個人的には)
55.
まとめ
56.
knockoutとは •UIとオブジェクトの 双方向バインディングを実現する
JSライブラリ •主要機能は監視とバインディング •"部分利用"から"フレームワーク"まで 場面に応じて利用可能
57.
knockout とは •OSS
–gihub –MITライセンス •依存関係もシンプル –ほかのJSライブラリに依存しない –サーバサイドのテクノロジにも依存しない •(RubyでもPHPでも.NETでも)
58.
個人的な感想 •つまみ食いしやすい –アプリのアーキテクチャに食い込まない
(ような使い方が可能) •サーバサイドのフレームワークとも 相性がいいと思う –学習コストが低い
59.
参考・リソース
60.
公式サイト •http://knockoutjs.com/ •ドキュメントとチュートリアルが充実
–ここの情報だけだいたいどうにかなる –チュートリアルもとっつきが良い
61.
おすすめ資料 •『Knockout.jsの概要』 –by
MayukiSawatari –https://speakerdeck.com/mayuki/knockout-dot-jsfalsegai-yao •knockoutの二大機能の仕組みを丁寧にわか りやすく解説。おすすめ。 •動画もあります。 –https://www.youtube.com/watch?v=U- TRaV3IU6A
62.
気軽に試すならjsfiddleで •http://jsfiddle.net/ •ブラウザでJavaScriptを試せる
–保存やシェアもできるよ •メジャーなライブラリを標準サポート –knockoutも対応
63.
番外編-JSFiddleのポイント(?) •jQueryとknockoutを使うなら –[Frameworks
& Extensions] •jQueryを選択 –[External Resources] •knockoutのCDNを指定 –http://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout- min.js
64.
ご清聴ありがとうございました
Baixar agora