Getting Started With
Knockout.js
2013/07/27 Sapporo.js
@iakio
• 石田朗雄
• 普段は主にPHPを書いてます
• Knockout.jsは2011年にちょっと使ってみた程度
今日話さないこと
• MVCとかMVVMってなに?
• 説明できません
• リアクティブプログラミングってなに?
• 興味あるかたは調べてみましょう
Knockout.jsとは
• Backbone.js, Ember.js, Angular.jsの次くらいに流
行っているのかも
• Ember.js, Angular.jsと比べるとかなり小さい
• Knockout.jsはフレームワークで...
Knockout.jsのはじめかた
• 公式のチュートリアルを2つくらいやる
• APIを3,4個学ぶ
• Bindingを5から10個くらい学ぶ
• とりあえずそれくらい
それでなにをやりたいの
• 本来書きたいことに集中したい
• 変更の頻度が違うものは分けたい
理想
• JavaScriptの状態(プロパティ)が変更されたら、
自動的に見た目も変更されるといいなあ
• ブラウザ上でテキストボックスやドロップダウ
ンを操作すると自動的にJavaScriptの状態に反
映されるといいなあ
Getter/Setter
{{price}} this.set(‘price’, 100);
this.get(‘price’); Ember.js
<p data-bind=“text:price”>
</p>又は
<!-- ko text...
DEMO
Dependency Tracking
Total = price * quantity
jQuery
イベントが発生したら、PriceとQuantityを取得し
てTotalを書き換える
$(“#quantity,#price”).on(“change”, function () {
$(“#total”).text(
$(“#p...
Totalはpriceとquantityから求められる
total: function () {
return this.get(‘price’) * this.get(‘quantity’);
}.property(‘price’, ‘qua...
すこしだけ仕組みについて
• 定義された時点で一回呼んでみる
• その間に呼ばれたGetterに依存している
• total()「今からトータル計算しまーす」
• price()「ん?トータル計算中に呼ばれた!」
• quantity()「ん?...
こういう場合は
• 初回にflagが偽だとpriceとquantityが呼ばれな
いので依存関係が記録されない
this.total = ko.computed(function () {
if (this.flag) {
return thi...
こうする
• 初回、priceとquantityの依存関係が記録されないが、
flagは記録されている
• flagが真になるとtotalが呼ばれ、priceとquantityの
依存関係が記録される
this.flag = ko.observ...
考え方を変える
• 例えばページャやフィルタ
• 「次へ」を押されたら、ページ番号を+1する
• ページ番号に依存して
• 現ページに表示するアイテムが変わる
• 「前へ」「次へ」ボタンを表示するかが変わる
• その他色々が自動的に変わる
良いところ
• 小さい。覚えることが少ない
• ViewModelは単なるObject
• ModelとかControllerとかいう言葉がでてこない
• セレクタから解放される
• 本来書きたかったことに集中できる
• Tutorialがよく...
注意点
• 全部入りではない
• AjaxしたければjQueryを使う
• Routerが必要であればsammy.jsを使う
• その他Pluginなどあるが、そこまでやるか
• 多対一のような複雑なdependency
• メソッド重複して呼...
Resources
• http://knockoutjs.com
• http://knockmeout.net
• http://blog.stevensanderson.com
Upcoming SlideShare
Loading in …5
×

Getting start with knockout.js

1,752 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

Getting start with knockout.js

  1. 1. Getting Started With Knockout.js 2013/07/27 Sapporo.js @iakio
  2. 2. • 石田朗雄 • 普段は主にPHPを書いてます • Knockout.jsは2011年にちょっと使ってみた程度
  3. 3. 今日話さないこと • MVCとかMVVMってなに? • 説明できません • リアクティブプログラミングってなに? • 興味あるかたは調べてみましょう
  4. 4. Knockout.jsとは • Backbone.js, Ember.js, Angular.jsの次くらいに流 行っているのかも • Ember.js, Angular.jsと比べるとかなり小さい • Knockout.jsはフレームワークではなくライブラ リだ(ズギャーン • たぶん最も特徴的なのはDependency Tracking
  5. 5. Knockout.jsのはじめかた • 公式のチュートリアルを2つくらいやる • APIを3,4個学ぶ • Bindingを5から10個くらい学ぶ • とりあえずそれくらい
  6. 6. それでなにをやりたいの • 本来書きたいことに集中したい • 変更の頻度が違うものは分けたい
  7. 7. 理想 • JavaScriptの状態(プロパティ)が変更されたら、 自動的に見た目も変更されるといいなあ • ブラウザ上でテキストボックスやドロップダウ ンを操作すると自動的にJavaScriptの状態に反 映されるといいなあ
  8. 8. Getter/Setter {{price}} this.set(‘price’, 100); this.get(‘price’); Ember.js <p data-bind=“text:price”> </p>又は <!-- ko text: price --> <!-- /ko --> this.price = ko.observable(); this.price(100); this.price(); Knockout.js {{price}} $scope.price = 100; $scope.price; Angular.js
  9. 9. DEMO
  10. 10. Dependency Tracking Total = price * quantity
  11. 11. jQuery イベントが発生したら、PriceとQuantityを取得し てTotalを書き換える $(“#quantity,#price”).on(“change”, function () { $(“#total”).text( $(“#price”).text() * $(“#quantity”).text(); ); }); jQuery
  12. 12. Totalはpriceとquantityから求められる total: function () { return this.get(‘price’) * this.get(‘quantity’); }.property(‘price’, ‘quantity’); Ember.js this.total = ko.computed(function () { return this.price() * this.quantity(); }, this); Knockout.js
  13. 13. すこしだけ仕組みについて • 定義された時点で一回呼んでみる • その間に呼ばれたGetterに依存している • total()「今からトータル計算しまーす」 • price()「ん?トータル計算中に呼ばれた!」 • quantity()「ん?トータル計算中に呼ばれた!」 • price(100)「よーしtotal()再計算しちゃうぞー」 this.total = ko.computed(function () { return this.price() * this.quantity(); }, this); Knockout.js
  14. 14. こういう場合は • 初回にflagが偽だとpriceとquantityが呼ばれな いので依存関係が記録されない this.total = ko.computed(function () { if (this.flag) { return this.price() * this.quantity(); } else { … } }, this); Knockout.js
  15. 15. こうする • 初回、priceとquantityの依存関係が記録されないが、 flagは記録されている • flagが真になるとtotalが呼ばれ、priceとquantityの 依存関係が記録される this.flag = ko.observable(); this.total = ko.computed(function () { if (this.flag()) { return this.price() * this.quantity(); } else { … } }, this); Knockout.js
  16. 16. 考え方を変える • 例えばページャやフィルタ • 「次へ」を押されたら、ページ番号を+1する • ページ番号に依存して • 現ページに表示するアイテムが変わる • 「前へ」「次へ」ボタンを表示するかが変わる • その他色々が自動的に変わる
  17. 17. 良いところ • 小さい。覚えることが少ない • ViewModelは単なるObject • ModelとかControllerとかいう言葉がでてこない • セレクタから解放される • 本来書きたかったことに集中できる • Tutorialがよくできている
  18. 18. 注意点 • 全部入りではない • AjaxしたければjQueryを使う • Routerが必要であればsammy.jsを使う • その他Pluginなどあるが、そこまでやるか • 多対一のような複雑なdependency • メソッド重複して呼ばれないよう注意 • ViewModelの肥大化 • 使いどころを選ぶ • SEOってなんだったっけ • Progressive Enhancement?
  19. 19. Resources • http://knockoutjs.com • http://knockmeout.net • http://blog.stevensanderson.com

×