Enviar búsqueda
Cargar
作って分かるKnockoutJS@ALM11月
•
7 recomendaciones
•
2,957 vistas
Takuya Ueda
Seguir
社内勉強会で発表したスライドです。
Leer menos
Leer más
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 26
Descargar ahora
Descargar para leer sin conexión
Recomendados
Knockout.js を利用したインタラクティブ web アプリケーション開発
Knockout.js を利用したインタラクティブ web アプリケーション開発
Daizen Ikehara
KnockoutJSを使用したアプリケーションの構築例
KnockoutJSを使用したアプリケーションの構築例
masakazusegawa
20140517 knockoutjs hands-on
20140517 knockoutjs hands-on
Seiji Noro
KnockoutJS勉強会 プロジェクトにmvvmを適用する狙い
KnockoutJS勉強会 プロジェクトにmvvmを適用する狙い
Toshihiro Kawachi
Webアプリ開発のトレンドとUIライブラリ開発事情(仙台Geek★Night #1)
Webアプリ開発のトレンドとUIライブラリ開発事情(仙台Geek★Night #1)
masakazusegawa
クライアントサイドMVVMアーキテクチャとVue.jsをまとめたよ
クライアントサイドMVVMアーキテクチャとVue.jsをまとめたよ
Seki Yousuke
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
normalian
AngularJSを浅めに紹介します
AngularJSを浅めに紹介します
nkazuki
Recomendados
Knockout.js を利用したインタラクティブ web アプリケーション開発
Knockout.js を利用したインタラクティブ web アプリケーション開発
Daizen Ikehara
KnockoutJSを使用したアプリケーションの構築例
KnockoutJSを使用したアプリケーションの構築例
masakazusegawa
20140517 knockoutjs hands-on
20140517 knockoutjs hands-on
Seiji Noro
KnockoutJS勉強会 プロジェクトにmvvmを適用する狙い
KnockoutJS勉強会 プロジェクトにmvvmを適用する狙い
Toshihiro Kawachi
Webアプリ開発のトレンドとUIライブラリ開発事情(仙台Geek★Night #1)
Webアプリ開発のトレンドとUIライブラリ開発事情(仙台Geek★Night #1)
masakazusegawa
クライアントサイドMVVMアーキテクチャとVue.jsをまとめたよ
クライアントサイドMVVMアーキテクチャとVue.jsをまとめたよ
Seki Yousuke
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
normalian
AngularJSを浅めに紹介します
AngularJSを浅めに紹介します
nkazuki
React.js + Flux
React.js + Flux
dsuke Takaoka
Windows ストアアプリのgrid viewを入門してみた
Windows ストアアプリのgrid viewを入門してみた
一希 大田
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Akira Inoue
( ゚∀゚)o彡° Flux! Flux!
( ゚∀゚)o彡° Flux! Flux!
Yuki Ishikawa
ライオンでも分かるVuejs
ライオンでも分かるVuejs
lion-man
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
normalian
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Ayumi Goto
プロダクトに 1 から Vue.js を導入した話
プロダクトに 1 から Vue.js を導入した話
Shohei Okada
Vue.js入門
Vue.js入門
Takuya Sato
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
Akira Inoue
チュートリアルではじめるVue.js
チュートリアルではじめるVue.js
小川 昌吾
簡単AngularJS(関西AngularJS勉強会)
簡単AngularJS(関西AngularJS勉強会)
Takahiro Maki
Moq & Fakes Framework を使った実践的ユニットテスト - BuildInsider
Moq & Fakes Framework を使った実践的ユニットテスト - BuildInsider
貴志 上坂
株式会社インタースペース 清水様 登壇資料
株式会社インタースペース 清水様 登壇資料
leverages_event
翻訳から始めるVue.js 入門
翻訳から始めるVue.js 入門
Makoto Chiba
Flux react現状確認会
Flux react現状確認会
VOYAGE GROUP
T35 ASP.NET MVCを使ったTDD入門
T35 ASP.NET MVCを使ったTDD入門
normalian
~初心者がこれから Web アプリの開発をするために~
~初心者がこれから Web アプリの開発をするために~
Oda Shinsuke
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発
Akira Inoue
Angular jsとsinatraでturbolinks
Angular jsとsinatraでturbolinks
Minori Tokuda
Asp Net Mvc 基礎のキソ
Asp Net Mvc 基礎のキソ
Yoshitaka Seo
Más contenido relacionado
La actualidad más candente
React.js + Flux
React.js + Flux
dsuke Takaoka
Windows ストアアプリのgrid viewを入門してみた
Windows ストアアプリのgrid viewを入門してみた
一希 大田
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Akira Inoue
( ゚∀゚)o彡° Flux! Flux!
( ゚∀゚)o彡° Flux! Flux!
Yuki Ishikawa
ライオンでも分かるVuejs
ライオンでも分かるVuejs
lion-man
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
normalian
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Ayumi Goto
プロダクトに 1 から Vue.js を導入した話
プロダクトに 1 から Vue.js を導入した話
Shohei Okada
Vue.js入門
Vue.js入門
Takuya Sato
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
Akira Inoue
チュートリアルではじめるVue.js
チュートリアルではじめるVue.js
小川 昌吾
簡単AngularJS(関西AngularJS勉強会)
簡単AngularJS(関西AngularJS勉強会)
Takahiro Maki
Moq & Fakes Framework を使った実践的ユニットテスト - BuildInsider
Moq & Fakes Framework を使った実践的ユニットテスト - BuildInsider
貴志 上坂
株式会社インタースペース 清水様 登壇資料
株式会社インタースペース 清水様 登壇資料
leverages_event
翻訳から始めるVue.js 入門
翻訳から始めるVue.js 入門
Makoto Chiba
Flux react現状確認会
Flux react現状確認会
VOYAGE GROUP
T35 ASP.NET MVCを使ったTDD入門
T35 ASP.NET MVCを使ったTDD入門
normalian
~初心者がこれから Web アプリの開発をするために~
~初心者がこれから Web アプリの開発をするために~
Oda Shinsuke
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発
Akira Inoue
La actualidad más candente
(20)
React.js + Flux
React.js + Flux
Windows ストアアプリのgrid viewを入門してみた
Windows ストアアプリのgrid viewを入門してみた
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
( ゚∀゚)o彡° Flux! Flux!
( ゚∀゚)o彡° Flux! Flux!
ライオンでも分かるVuejs
ライオンでも分かるVuejs
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
プロダクトに 1 から Vue.js を導入した話
プロダクトに 1 から Vue.js を導入した話
Vue.js入門
Vue.js入門
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
チュートリアルではじめるVue.js
チュートリアルではじめるVue.js
簡単AngularJS(関西AngularJS勉強会)
簡単AngularJS(関西AngularJS勉強会)
Moq & Fakes Framework を使った実践的ユニットテスト - BuildInsider
Moq & Fakes Framework を使った実践的ユニットテスト - BuildInsider
株式会社インタースペース 清水様 登壇資料
株式会社インタースペース 清水様 登壇資料
翻訳から始めるVue.js 入門
翻訳から始めるVue.js 入門
Flux react現状確認会
Flux react現状確認会
T35 ASP.NET MVCを使ったTDD入門
T35 ASP.NET MVCを使ったTDD入門
~初心者がこれから Web アプリの開発をするために~
~初心者がこれから Web アプリの開発をするために~
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発
Similar a 作って分かるKnockoutJS@ALM11月
Angular jsとsinatraでturbolinks
Angular jsとsinatraでturbolinks
Minori Tokuda
Asp Net Mvc 基礎のキソ
Asp Net Mvc 基礎のキソ
Yoshitaka Seo
Nodejs
Nodejs
和樹 川端
脱・独自改造! GebでWebDriverをもっとシンプルに
脱・独自改造! GebでWebDriverをもっとシンプルに
Hiroko Tamagawa
Bp study39 nodejs
Bp study39 nodejs
Yohei Sasaki
Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
AngularJSについて
AngularJSについて
昌生 高橋
vImageのススメ
vImageのススメ
Shuichi Tsutsumi
JavaでWebサービスを作り続けるための戦略と戦術 JJUG-CCC-2018-Spring-g1
JavaでWebサービスを作り続けるための戦略と戦術 JJUG-CCC-2018-Spring-g1
Y Watanabe
カジュアルにMySQL Clusterを使ってみよう@MySQL Cluster Casual Talks 2013.09
カジュアルにMySQL Clusterを使ってみよう@MySQL Cluster Casual Talks 2013.09
Mikiya Okuno
Gws 20120521 gradle
Gws 20120521 gradle
Nobuhiro Sue
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
Yasuhito Yabe
Jenkins と groovy
Jenkins と groovy
Kohsuke Kawaguchi
実践Backbone.Marionette 現場の悩みと解決まで
実践Backbone.Marionette 現場の悩みと解決まで
Ryuma Tsukano
Guide to GraalVM (Oracle Groundbreakers APAC 2019 Tour in Tokyo)
Guide to GraalVM (Oracle Groundbreakers APAC 2019 Tour in Tokyo)
Koichi Sakata
Try_to_writecode_practicaltest #atest_hack
Try_to_writecode_practicaltest #atest_hack
kimukou_26 Kimukou
大規模なJavaScript開発の話
大規模なJavaScript開発の話
terurou
【17-C-2】 クラウド上でのエンタープライズアプリケーション開発
【17-C-2】 クラウド上でのエンタープライズアプリケーション開発
lalha
Introduction to GraalVM and Native Image
Introduction to GraalVM and Native Image
Koichi Sakata
090821 Ruby Sapporo Night Ruby Cocoa
090821 Ruby Sapporo Night Ruby Cocoa
Tomoki Maeda
Similar a 作って分かるKnockoutJS@ALM11月
(20)
Angular jsとsinatraでturbolinks
Angular jsとsinatraでturbolinks
Asp Net Mvc 基礎のキソ
Asp Net Mvc 基礎のキソ
Nodejs
Nodejs
脱・独自改造! GebでWebDriverをもっとシンプルに
脱・独自改造! GebでWebDriverをもっとシンプルに
Bp study39 nodejs
Bp study39 nodejs
Web制作勉強会 #2
Web制作勉強会 #2
AngularJSについて
AngularJSについて
vImageのススメ
vImageのススメ
JavaでWebサービスを作り続けるための戦略と戦術 JJUG-CCC-2018-Spring-g1
JavaでWebサービスを作り続けるための戦略と戦術 JJUG-CCC-2018-Spring-g1
カジュアルにMySQL Clusterを使ってみよう@MySQL Cluster Casual Talks 2013.09
カジュアルにMySQL Clusterを使ってみよう@MySQL Cluster Casual Talks 2013.09
Gws 20120521 gradle
Gws 20120521 gradle
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
Jenkins と groovy
Jenkins と groovy
実践Backbone.Marionette 現場の悩みと解決まで
実践Backbone.Marionette 現場の悩みと解決まで
Guide to GraalVM (Oracle Groundbreakers APAC 2019 Tour in Tokyo)
Guide to GraalVM (Oracle Groundbreakers APAC 2019 Tour in Tokyo)
Try_to_writecode_practicaltest #atest_hack
Try_to_writecode_practicaltest #atest_hack
大規模なJavaScript開発の話
大規模なJavaScript開発の話
【17-C-2】 クラウド上でのエンタープライズアプリケーション開発
【17-C-2】 クラウド上でのエンタープライズアプリケーション開発
Introduction to GraalVM and Native Image
Introduction to GraalVM and Native Image
090821 Ruby Sapporo Night Ruby Cocoa
090821 Ruby Sapporo Night Ruby Cocoa
Más de Takuya Ueda
Goにおけるバージョン管理の必要性 − vgoについて −
Goにおけるバージョン管理の必要性 − vgoについて −
Takuya Ueda
WebAssembly with Go
WebAssembly with Go
Takuya Ueda
GAE/Goとsyncパッケージ
GAE/Goとsyncパッケージ
Takuya Ueda
静的解析を使った開発ツールの開発
静的解析を使った開発ツールの開発
Takuya Ueda
そうだ、Goを始めよう
そうだ、Goを始めよう
Takuya Ueda
マスター・オブ・goパッケージ
マスター・オブ・goパッケージ
Takuya Ueda
メルカリ カウルのマスタデータの更新
メルカリ カウルのマスタデータの更新
Takuya Ueda
Go1.8 for Google App Engine
Go1.8 for Google App Engine
Takuya Ueda
Go Friday 傑作選
Go Friday 傑作選
Takuya Ueda
GoによるiOSアプリの開発
GoによるiOSアプリの開発
Takuya Ueda
Static Analysis in Go
Static Analysis in Go
Takuya Ueda
静的解析とUIの自動生成を駆使してモバイルアプリの運用コストを大幅に下げた話
静的解析とUIの自動生成を駆使してモバイルアプリの運用コストを大幅に下げた話
Takuya Ueda
メルカリ・ソウゾウでは どうGoを活用しているのか?
メルカリ・ソウゾウでは どうGoを活用しているのか?
Takuya Ueda
エキスパートGo
エキスパートGo
Takuya Ueda
Go静的解析ハンズオン
Go静的解析ハンズオン
Takuya Ueda
Goにおける静的解析と製品開発への応用
Goにおける静的解析と製品開発への応用
Takuya Ueda
オススメの標準・準標準パッケージ20選
オススメの標準・準標準パッケージ20選
Takuya Ueda
Gopher Fest 2017参加レポート
Gopher Fest 2017参加レポート
Takuya Ueda
Google Assistant関係のセッションまとめ
Google Assistant関係のセッションまとめ
Takuya Ueda
Cloud functionsの紹介
Cloud functionsの紹介
Takuya Ueda
Más de Takuya Ueda
(20)
Goにおけるバージョン管理の必要性 − vgoについて −
Goにおけるバージョン管理の必要性 − vgoについて −
WebAssembly with Go
WebAssembly with Go
GAE/Goとsyncパッケージ
GAE/Goとsyncパッケージ
静的解析を使った開発ツールの開発
静的解析を使った開発ツールの開発
そうだ、Goを始めよう
そうだ、Goを始めよう
マスター・オブ・goパッケージ
マスター・オブ・goパッケージ
メルカリ カウルのマスタデータの更新
メルカリ カウルのマスタデータの更新
Go1.8 for Google App Engine
Go1.8 for Google App Engine
Go Friday 傑作選
Go Friday 傑作選
GoによるiOSアプリの開発
GoによるiOSアプリの開発
Static Analysis in Go
Static Analysis in Go
静的解析とUIの自動生成を駆使してモバイルアプリの運用コストを大幅に下げた話
静的解析とUIの自動生成を駆使してモバイルアプリの運用コストを大幅に下げた話
メルカリ・ソウゾウでは どうGoを活用しているのか?
メルカリ・ソウゾウでは どうGoを活用しているのか?
エキスパートGo
エキスパートGo
Go静的解析ハンズオン
Go静的解析ハンズオン
Goにおける静的解析と製品開発への応用
Goにおける静的解析と製品開発への応用
オススメの標準・準標準パッケージ20選
オススメの標準・準標準パッケージ20選
Gopher Fest 2017参加レポート
Gopher Fest 2017参加レポート
Google Assistant関係のセッションまとめ
Google Assistant関係のセッションまとめ
Cloud functionsの紹介
Cloud functionsの紹介
Último
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
Shota Ito
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
iPride Co., Ltd.
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
Atomu Hidaka
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
UPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdf
furutsuka
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
osamut
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
iPride Co., Ltd.
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
danielhu54
Último
(9)
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
UPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdf
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
作って分かるKnockoutJS@ALM11月
1.
作って分かる KnockoutJS 2013/11/19(火) @ALM 11月
2.
自己紹介 KLab株式会社 エンジニア 上田拓也 Go, JavaScript, Java, twitter
: @tenntenn PHP
3.
アジェンダ ● KnockoutJSとは? ● バインディングの仕組み ●
実装してみた
4.
KnockoutJSとは?
5.
KnockoutJSとは? ● JavaScriptのMVVMフレームワーク ○ MVVM:
Model-View-ViewModel ● ViewModel(VM)とDOMの要素を双方向バイン ドする機能を提供する バインド ViewModel Element
6.
KnockoutJSの特徴 ● コールバックが少なくなる ● 他のフレームワークと一緒に使える ○
提供しているのはバインディングだけ ○ 既存のプロジェクトに投入しやすい(かも) ● 独自タグを使っていない ○ data-bind属性かコメントを使う ○ でもdata-bind属性が大きくなりすぎる ■ <div data-bind=”abind: avalue, cbind: cvalue,...”> ● 割りと重い ○ モバイル用途だと若干重い
7.
KnockoutJSの双方向バインド (1)ViewModel → Element ViewModel { firstName:
‘Foo’, lastName: ‘Bar’ } Element バインド <input value=”Foo”> <input value=”Bar”>
8.
KnockoutJSの双方向バインド (1)ViewModel → Element ViewModel { firstName:
‘Piyo’, lastName: ‘Hoge’ } Element バインド <input value=”Foo”> <input value=”Bar”>
9.
KnockoutJSの双方向バインド (1)ViewModel → Element ViewModel { firstName:
‘Piyo’, lastName: ‘Hoge’ } Element バインド <input value=”Piyo”> <input value=”Hoge”>
10.
KnockoutJSの双方向バインド (2)ViewModel ← Element ViewModel { firstName:
‘Foo’, lastName: ‘Bar’ } Element バインド <input value=”Foo”> <input value=”Bar”>
11.
KnockoutJSの双方向バインド (2)ViewModel ← Element ViewModel { firstName:
‘Foo’, lastName: ‘Bar’ } Element バインド <input value=”Piyo”> <input value=”Hoge”>
12.
KnockoutJSの双方向バインド (2)ViewModel ← Element ViewModel { firstName:
‘Piyo’, lastName: ‘Hoge’ } Element バインド <input value=”Piyo”> <input value=”Hoge”>
13.
KnockoutJSの使用例 ■HTML <input data-bind=”value:firstName”> <input data-bind=”value:lastName”> ■JavaScript var
vm = { firstName: ko.observable(“Foo”), lastName: ko.observable(“Bar”) }; ko.applyBindings(vm, document.body); http://jsfiddle.net/uedatakuya/ma43x/
14.
いろいろなバインディング ● cssバインド <div data-bind=”css:
{error, isError}”></div> ● if/ifnotバインド <!-- ko if: ok -->OK<!-- /ko--> ● foreachバインド <ol data-bind=”foreach: items”> <li data-bind=”text:$data.name”></li> </ol> http://knockoutjs.com/documentation/introduction.html
15.
カスタムバインド ● 独自バインドを作ることができる ko.bindingHandlers.yourBindingName =
{ init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { }, update: function(element, valueAccessor, allBindings, viewModel, bindingContext) { } } <div data-bind=”yourBindingName: someValue”></div> http://knockoutjs.com/documentation/custom-bindings.html
16.
ko.computed (ko.dependentObservable) ● 他observable(subscribable)に依存した observableを作れる var a
= ko.observable(100); var c = ko.obaervable(200); var c = ko.computed(function() { return a() + b(); }); console.log(a(), b(), c()); // 100, 200, 300 ⇒どういう仕組で動いているのか?
17.
バインディングの仕組み
18.
バインディングの仕組み ● KnockoutJSのバインディングの仕組 みをソースコードを読んでみて理解する
19.
対象とするもの ● ko.subscribable(ko.subscription) ● ko.observable ●
ko.dependencyDetection ● ko.dependentObservable(ko. computed) http://jsfiddle.net/uedatakuya/9hS5n/
20.
ko.subscribable ko.subscribable -----------------------------+subscribe() +notifySubscripters() ko.observable ko.dependentObservable (ko.computed) http://jsfiddle.net/uedatakuya/9hS5n/
21.
ko.computed (ko.dependentObservable) ● 他observable(subscribable)に依存した observableを作れる var a
= ko.observable(100); var c = ko.obaervable(200); var c = ko.computed(function() { return a() + b(); }); console.log(a(), b(), c()); // 100, 200, 300 ⇒どういう仕組で動いているのか?
22.
ko.observable(ko.subscribable) ko.observable (ko.subscribable) subscripter subscript Write notifySubscripters callback http://jsfiddle.net/uedatakuya/9hS5n/
23.
ko.dependenctyDetectionと ko.dependentObservable ko. dependentObserva ble Init ko. dependencyDet ection ko.subscribable evaluateImediate begin Read registerDependency callback <依存関係に追加> end http://jsfiddle.net/uedatakuya/9hS5n/
24.
実装してみた
25.
実装してみた ● さらに簡単に実装してみて理解する ● エラー処理や難しいことは省く http://jsfiddle.net/uedatakuya/9hS5n/
26.
【解説】実装してみた ● https://gist.github. com/tenntenn/7540535 ● http://jsfiddle. net/uedatakuya/9hS5n/
Descargar ahora