狠狠撸

狠狠撸Share a Scribd company logo

Knocked out in knockout js

?
?
Hiroyuki Tashima
Hiroyuki Tashima

It was knocked out in knockout.js in Using knockout.js, i made a lot of mistakes.

1 of 98
Downloaded 13 times
办苍辞肠办辞耻迟.箩蝉に办苍辞肠办辞耻迟された话 2014/02/28 ?Fukuoka ?Frontend ?Frogs ?Ex Hiroyuki ?Tashima
“GGoodd ffiigghhtt oonn tthhee ssiiddee wwiitthh tthhee bbeesstt FFrraammeewwoorrkk..” -- NNaappoolleeoonn BBoonnaappaarrttee 神は最高のフレームワークを使う側に味方する - ?ナポレオン?ボナパルト
まずはじめに
は？谁？
【自己紹介】 田 fb hiroyuki.tashima 島 @HiroyukiTashima 寛 ?日本唐揚協会公認カラアゲニスト ? ?株式会社gumi ?West ? 之 ?フロントエンドエンジニア ?
办苍辞肠办辞耻迟.箩蝉に办苍辞肠办辞耻迟された话
なぜ knockout.js ?？
まずはこちらを ご覧いただきたい (?ワ?) : ?福岡出張中のHさん(仮) たしま：(?ε?)
(?ワ?) たしまさん、knockout.jsってフレームワーク 使いませんか？
ア、イイデスネー > (?ε?)
(?ワ?) knockout.jsだとかなりコード量減って いい感じになりますよ?
ア、イイデスネー > (?ε?)
(?ワ?) たしまさんって何かフレームワーク使ってます？
ア、イイデスネー > (?ε?)
要约
表示物、データ多い
表示物、データ多い ＋ DOM操作も多い
表示物、データ多い ＋ DOM操作も多い ↓ js長くなる
表示物、データ多い ＋ DOM操作も多い ↓ js長くなる ↓ (??ω?`)わけわかめ
よわい(确信)
表示物、データ多い
表示物、データ多い ＋ DOM操作も多い
表示物、データ多い ＋ DOM操作も多い ↓ knockout.jsを使う
表示物、データ多い ＋ DOM操作も多い ↓ knockout.jsを使う ↓ コード量：減　動作：軽
つよい(确信)
で、办苍辞肠办辞耻迟.箩蝉を使うことに…
そもそも knockout.jsとは？
knockout.jsとは？ knockout.jsは データモデルを基盤とし、 リッチなUI構築を行う目的で開発された JavaScriptライブラリである。
wikipediaのコピペを貼るんじゃあないよ！ > (?ε?#)
?knockout.js ?UI用JavaScriptライブラリ ?jQuery等の別ライブラリとぶつからない ?MVVM(Model, ?View, ?ViewModel) ?DOM操作に関するコードがほぼいらない ?軽い(動作、容量)
?knockout.js ?3大ポイント　
?knockout.js ?MVVM 　Model ?: ?Ajaxから受け取ったデータ 　View ?: ?HTML 　ViewModel ?: ?ページ内で一時的に使用、変更するデータ
?knockout.js ?View(HTML)からbind指定 　click, ?style, ?css, ?attr, ?…
?knockout.js ?常に変数の変化を監視(observable)
概要だけじゃよく分からんすなぁ > (?ε?)
使用例
テキスト入力 ?+ ?ボタンclick ? ?↓ ?window ?& ?テキスト表示
つまり テキスト入力 ボタンclick
こうなる ウィンドウ表示 テキスト表示
办苍辞肠办辞耻迟.箩蝉を使わない场合
HTML <div ?id="main"> ? ? ? ? ? ? ? ? ?<input ?type="text" ?id="inputForm"></input> ? ? ? ? ? ? ? ? ?<buKon ?onclick="openPopup()"> ?o ?p ?e ?n ?</buKon> ? </div> ? <div ?id="popup" ?style="display:none"> ? ? ? ? ?<div ?style="opacity:1;"> ? ? ? ? ? ? ? ? ?<font ?color="#???">popupWindow</font><br ?/> ? ? ? ? ? ? ? ? ?<div ?style="color:#???;">input.value ?: ? ? ? ? ? ? ? ? ? ? ? ? ? ?<span ?id="inputResult"></span> ? ? ? ? ? ? ? ? ?</div> ? ? ? ? ? ? ? ? ?<buKon ?onclick="closePopup()"> ?c ?l ?o ?s ?e ?</buKon> ? ? ? ? ?</div> ? </div>
HTML JavaScriptでDOM取得するための id、class指定が必要
JavaScript var ?popup ?= ?document.getElementById("popup"); ? ? ? ? ? ? ? ? ? ? ? ? ? var ?input ?= ? ? ? ? ?document.getElementById("inputForm"); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var ?inputResult ?= ? ? ? ? ?document.getElementById("inputResult"); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? funcVon ?openPopup(){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?inputResult.innerHTML ?= ?input.value; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?popup.style.display="block"; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? funcVon ?closePopup(){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?popup.style.display="none"; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? } ?
JavaScript ?DOM ?elementの取得 ?styleの変更 ?innerHTMLで変更
(??ω?缚)うーん…
? 使 ！ Knockout.js ? ！ 聞話
办苍辞肠办辞耻迟.箩蝉を使った场合
JavaScript 変数をkoの監視対象に設定 funcVon ?AppViewModel(){ ? ? ? ? ?this.popupVisible ?= ?ko.observable(false); ? ? ? ? ?this.inputValue ?= ?ko.observable(""); ? } ? ? ko.applyBindings(new ?AppViewModel()); koを作動させる(第二引数なし→document全体が対象)
JavaScript ViewModelの作成 変数の宣言&監視対象化 bindingしてkoを作動
HTML <div="main"> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<input ?type="text" ?data-?‐bind="value: ?inputValue"></input> ? ? ? ? ?<buKon ?data-?‐bind="click: ?popupVisible(true)"> ?o ?p ?e ?n ?</buKon> ? </div> ? 変数をGET <div ?id="popup" ? ? ? ? ? ?data-?‐bind="style: ?{display: ?popupVisible() ?? ?'block' ?: ?'none' ?}"> ? ? ? ? ? ?<div ?style="opacity:1;"> ? ? ? ? ? ? ? ? ?<font ?color="#???">popupWindow</font><br ?/> ? ? ? ? ? ? ? ? ?<div ?style="color:#???;">input.value ?: ? ? ? ? ? ? ? ? ? ? ? ? ? ?<span ?data-?‐bind="text: ?inputValue()"></span></div> ? ? ? ? ? ? ? ? ?<buKon ?data-?‐bind="click: ?popupVisible(false)"> ?c ?l ?o ?s ?e ?</buKon> ? ? ? ? ?</div> ? </div> 変数をSET
HTML data-bind属性で関連付け (koで監視中の変数とリンク) DOM取得用のid, ?class不要 変数名() ?: ?getter 変数名(value) ?: ?setter
Before var ?popup ?= ?document.getElementById("popup"); ? ? ? ? ? ? ? ? ? ? ? ? ? var ?input ?= ? ? ? ? ?document.getElementById("inputForm"); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var ?inputResult ?= ? ? ? ? ?document.getElementById("inputResult"); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? funcVon ?openPopup(){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?inputResult.innerHTML ?= ?input.value; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?popup.style.display="block"; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? funcVon ?closePopup(){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?popup.style.display="none"; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? } ?
After funcVon ?AppViewModel(){ ? ? ? ? ?this.popupVisible ?= ?ko.observable(false); ? ? ? ? ?this.inputValue ?= ?ko.observable(""); ? } ? ko.applyBindings(new ?AppViewModel());
圧倒的ではないか ?knockout.jsは
次
Ajax通信(jQueryを使用) ?↓ ?適当に表示物を更新
HTML <div ?id="main"> ? ? ? ? ? ? ? ? ?<buKon ?data-?‐bind="click: ?ajaxStart"> ?Ajax ?Start ?</buKon> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?</div> ? ? ? ? ? ? ? ? ? ? ?<div ?id="popup" ? ? ? ? ? ? ? ? ? ?data-?‐bind="style: ?{display: ?popupVisible ?? ?'block' ?: ?'none' ?}"> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<div ?style="opacity:1;"> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<font ?color="#???">popupWindow</font><br ?/> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<div ?style="color:#???;">ajax ?data<br ?/> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<span ?data-?‐bind="text: ?ajaxData"></span></div> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<buKon ?data-?‐bind="click: ?popupVisible(false) ?">close</buKon> ? ? ? ? ? ? ? ? ?</div> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?</div>
JavaScript ?(一部) funcVon ?AppViewModel(){ ? ? ? ? ?var ?self ?= ?this; ? ? ? ? ?self.popupVisible ?= ?ko.observable(false); ? ? ? ? ?self.ajaxData ?= ?ko.observable(); ? ? ? ? ?self.ajaxStart ?= ?funcVon(){ ? ? ? ? ? ? ? ? ?$.ajax({ ? ? ? ? ? ? ? ? ? ? ? ? ?url: ?“tset”, ? ? ? ? ? ? ? ? ? ? ? ? ?type: ?”GET", ? ? ? ? ? ? ? ? ? ? ? ? ?success: ?funcVon ?(json){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?var ?jsonObj ?= ?ko.toJS(json); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?self.ajaxData(jsonObj) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?self.popupVisible(true); ? ? ? ? ? ? ? ? ? ? ? ? ?} ? ? ? ? ? ? ? ? ?}) ? ? ? ? ?} ? } ? ko.applyBindings(new ?AppViewModel());
knockout.js？ ボコボコにしてやんよー 　∧_∧ （ ??ω?)＝つ≡つ （っ ?≡つ＝つ `/　　) ????????? (ノ￣∪
(って思うでしょう？)
あれ？动かない…
なぜだ、なぜ动かん…
?knockout.js よくある落とし穴　
knockout.jsの落とし穴 監視中(observable)の変数 getterとsetterをよく間違える！
knockout.jsの落とし穴 監視中(observable)の変数 getterとsetterをよく間違える！ getter ?→　test_value() setter ?→　test_value(val)
knockout.jsの落とし穴 しかも
knockout.jsの落とし穴 しかも <input ?type="text" ?data-?‐bind="value: ?inputValue"></input> ? valueへのbindはgetterの()は不要
knockout.jsの落とし穴 しかも <input ?type="text" ?data-?‐bind="value: ?inputValue"></input> ? valueへのbindはgetterの()は不要 data-?‐bind=“style: ?{display: ?popupVisible() ?? ?‘block’ ?: ?‘none’ ?} ?" ? でもこいつ↑には()必要
knockout.jsの落とし穴 しかも <input ?type="text" ?data-?‐bind="value: ?inputValue"></input> ? valueへのbindはgetterの()は不要 data-?‐bind=“style: ?{display: ?popupVisible() ?? ?‘block’ ?: ?‘none’ ?} ?" ? でもこいつ↑には()必要 (# ??Д?)　< ?紛らわしいんじゃーい！
事态は见えてきた、后は简単だ
あれ？また动かない…
なぜだ、なぜ(谤测
knockout.jsの落とし穴 同変数の監視化(ko.observable)は 2回目以降はスルーされる
knockout.jsの落とし穴 同変数の監視化(ko.observable)は 2回目以降はスルーされる funcVon ?AppViewModel(){ ? ? ? ? ?this.popupVisible ?= ?ko.observable(false); ? ? ? ? ?this.popupVisible ?= ?ko.observable(true); ? } ? 2回目はスルーされるのでfalseのまま
knockout.jsの落とし穴 ko.observableは1回のみ。 変数への代入はsetterで指定！ funcVon ?AppViewModel(){ ? ? ? ? ?this.popupVisible ?= ?ko.observable(false); ? ? ? ? ?this.popupVisible(true); ? } ? setterで変数の内容変更
事态は见えて(谤测
あれ？また…
五飛教えてくれ。俺は後何回画像を張ればいい…？ 　俺はあと何回パプテマス様の画像を張ればいいんだ？ knockout.jsは俺に何も言ってはくれない… 　 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?教えてくれ、五飛！ ?
knockout.jsの落とし穴 ko.applyBinding(koの作動)で 要素に指定できるViewModelは一つのみ ※applyBindingの第二引数で DOM要素を指定可能※ ※applyBindingの第二引数を指定しないと document全体が対象となる※
knockout.jsの落とし穴 ko.applyBinding(koの作動)は 指定できるViewModelは一つのみ ko.applyBindings(new ?AppTestModel1()); ko.applyBindings(new ?AppTestModel2()); 同要素(document全体)2つはできんのだよ
knockout.jsの落とし穴 対応策
knockout.jsの落とし穴 対応策 ViewModelを一つのみにする
knockout.jsの落とし穴 対応策 ViewModelを一つのみにする or オブジェクトを作り、 それにViewModelをつなげる
knockout.jsの落とし穴 対応策 ViewModelを一つのみにする or オブジェクトを作り、 それにViewModelをつなげる or DOM指定で範囲を分ける
さすがにもうこれ以上 ひっかかることは
あっ ※お察し下さい※
knockout.jsまとめ ?? JavaScriptコード量が大幅に減る ?? HTML(View)との関連づけが簡単 ?? 動作がすごく軽い ?? 大規模になると面倒くさい面が
こんな長いコード(500行)が ? ?funcVon ?draw(){ ? ? ? ? ? ? ? ? ?//draw ?map ? ? ? ? ? ? ? ? ?//draw ?window ? // ? ? ? ? ? ? ? ?ctx.?llRect(0, ?0, ?SCREEN_WIDTH, ?SCREEN_HEIGHT); ? ? ? ? ? ? ? ? ?ctx.clearRect(0, ?0, ?SCREEN_WIDTH, ?SCREEN_HEIGHT); ? ? ? ? ? ? ? ? ?var ?bu? ?= ?0; ? ? ? ? ? ? ? ? ?if(imageDrag){ ? ? ? ? ? ? ? ? ? ? ? ? ?bu? ?= ?xDis ?/ ?400 ?* ?Math.PI ?* ?(-?‐1); ? ? ? ? ? ? ? ? ?} ? ? ? ? ? ? ? ? ?for(i ?= ?0; ?i ?< ?IMG_NUM; ?i++){ ? ? ? ? ? ? ? ? ? ? ? ? ?renderOrder[i] ?= ?i; ? ? ? ? ? ? ? ? ? ? ? ? ?if((?agInfo[renderOrder[i]].rad ?+ ?bu?) ?< ?0){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??agInfo[renderOrder[i]].rad ?= ??agInfo[renderOrder[i]].rad ?+ ?Math.PI ?* ?circleMode; ? ? ? ? ? ? ? ? ? ? ? ? ?} ? ? ? ? ? ? ? ? ? ? ? ? ?else ?if((?agInfo[renderOrder[i]].rad ?+ ?bu?) ?> ?(Math.PI ?* ?circleMode)){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??agInfo[renderOrder[i]].rad ?= ??agInfo[renderOrder[i]].rad ?-?‐ ?Math.PI ?* ?circleMode; ? ? ? ? ? ? ? ? ? ? ? ? ?} ? ? ? ? ? ? ? ? ?} ? ? ? ? ? ? ? ? ?//sort ?for ?render ? ? ? ? ? ? ? ? ?for(i ?= ?0; ?i ?< ?IMG_NUM ?-?‐ ?1; ?i++){ ? ? ? ? ? ? ? ? ? ? ? ? ?for(j ?= ?(i ?+ ?1); ?j ?< ?IMG_NUM; ?j++){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?if(Math.abs(Math.PI ?/ ?2 ?-?‐ ?(?agInfo[renderOrder[i]].rad ?+ ?bu?)) ?< ?Math.abs(Math.PI ?/ ?2 ?-?‐ ? (?agInfo[renderOrder[j]].rad ?+ ?bu?))){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?var ?tmp; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?tmp ?= ?renderOrder[i]; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?renderOrder[i] ?= ?renderOrder[j]; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?renderOrder[j] ?= ?tmp; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?} ? ? ? ? ? ? ? ? ? ? ? ? ?} ? ? ? ? ? ? ? ? ?} ? ? ? ? ? ? ? ? ? ?for(i ?= ?0; ?i ?< ?IMG_NUM; ?i++){ ? ? ? ? ? ? ? ? ? ? ? ? ?if( ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?((?agInfo[renderOrder[i]].rad ?+ ?bu?) ?> ?(Math.PI ?/ ?12))&& ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?((?agInfo[renderOrder[i]].rad ?+ ?bu?) ?< ?(Math.PI ?/ ?12 ?* ?11)) ? ? ? ? ? ? ? ? ? ? ? ? ?) ? ? ? ? ? ? ? ? ? ? ? ? ?{ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?var ?mag ?= ?ZOOM_MIN; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?var ?temp ?= ?Math.abs((?agInfo[renderOrder[i]].rad ?+ ?bu?) ?-?‐ ?Math.PI ?/ ?2); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?if(temp ?< ?ZOOM_RANGE){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?mag ?= ?mag ?+(ZOOM_RANGE ?-?‐ ? ?temp ?/ ?ZOOM_RANGE) ?* ?ZOOM_MAX; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?ctx.drawImage( ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?drawFlagObj[renderOrder[i]], ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?parseInt(RADIUS_SIDE ?* ?Math.cos(?agInfo[renderOrder[i]].rad ?+ ?bu?) ?+ ?CENTER_X ?-?‐ ? drawFlagObj[renderOrder[i]].width ?/ ?2 ?/ ?2 ?* ?mag), ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?parseInt(RADIUS_LENGTH ?* ?Math.sin(?agInfo[renderOrder[i]].rad ?+ ?bu?) ?+ ?CENTER_Y ?-?‐ ? drawFlagObj[renderOrder[i]].height ?/ ?2 ?/ ?2 ?* ?mag), ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?parseInt(drawFlagObj[renderOrder[i]].width ?/ ?2 ?* ?mag), ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?parseInt(drawFlagObj[renderOrder[i]].height ?/ ?2 ?* ?mag) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?); ? ? ? ? ? ? ? ? ? ? ? ? ?} ? ? ? ? ? ? ? ? ?} ? ? ? ? ? ? ? ? ?centerImageNo ?= ??agInfo[renderOrder[IMG_NUM ?-?‐ ?1]].imageNo; ? ? ? ? ? ? ? ? ?if( ? ? ? ? ? ? ? ? ? ? ? ? ?(mapState ?== ?NORMAL)&& ? ? ? ? ? ? ? ? ? ? ? ? ?(imageDrag ?== ?false) ? ? ? ? ? ? ? ? ?) ? ? ? ? ? ? ? ? ?{ ? ? ? ? ? ? ? ? ? ? ? ? ?ctx.drawImage( ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?drawArrowObj[0], ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?parseInt(50), ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?parseInt((SCREEN_HEIGHT ?/ ?2) ?-?‐ ?drawArrowObj[0].height ?/ ?2 ?+ ?7), ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?parseInt(drawArrowObj[0].width ?/ ?2), ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?parseInt(drawArrowObj[0].height ?/ ?2) ? ? ? ? ? ? ? ? ? ? ? ? ?); ? ? ? ? ? ? ? ? ?} ? ? ? ? ?} ? ?//main ?loop ? ? ? ? ?funcVon ?mainLoop(){ ? ? ? ? ? ? ? ? ?var ?drawInterval ?= ?setInterval(funcVon(){ ? ? ? ? ? ? ? ? ? ? ? ? ?if(mapState ?== ?AUTO_MOVE){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?for(i ?= ?0; ?i ?< ?IMG_NUM; ?i++){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??agInfo[i].rad ?+= ?autoMoveRad; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?autoMoveFrame++; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?if(autoMoveFrame ?>= ?AUTO_MOVE_FRAME){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?autoMoveFrame ?= ?0; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?mapState ?= ?NORMAL; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//change ?map ?detail ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?var ?temp ?= ?$(".?agTitle"); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?var ?temp2 ?= ?$("#VtleViewer"); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?var ?element ?= ?temp[centerImageNo].cloneNode(true); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?temp2.empty(); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?temp2.append(element); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?} ? ? ? ? ? ? ? ? ? ? ? ? ?} ? ? ? ? ? ? ? ? ? ? ? ? ?draw(); ? ? ? ? ? ? ? ? ?}, ?1000 ?/ ?FPS); ? ? ? ? ?} ? ? }).call(this); ?
Knocked out in knockout js
こうなる！(イメージ) funcVon ?AppViewModel(){ ? ? ? ? ?var ?self ?= ?this; ? ? ? ? ?self.popupVisible ?= ?ko.observable(false); ? ? ? ? ?self.viewWindow ?= ?ko.observable(0); ? ? ? ? ?$(“#statusWIndow”).swipeRight{ ? ? ? ? ? ? ? ? ?viewWindow(viewWindow()++); ? ? ? ? ?} ? ? ? ? ? ?$(“#statusWIndow”).swipeLe}{ ? ? ? ? ? ? ? ? ?viewWindow(viewWindow()-?‐-?‐); ? ? ? ? ?} ? ? } ? ko.applyBindings(new ?AppViewModel());
Knocked out in knockout js
そう、办苍辞肠办辞耻迟.箩蝉ならね
もうこれで使えるはず！ 　 　 　 　　　　　　　 　 　　　　　　　　　　　　　　　　 ,.へ 　　___ ?　　　　　　　 　 　 　 　 　　　　　　　　　　　　?　　i ? ? 　「 ?_i〉　　　 　 　　　　　　 　 　　　　　　　　　　　　 ゝ　〈 ? ? 　?　ノ 　　　　　　　　　　　　　　　　　　　　　　　　　　iニ(() ? ? 　i ?　{ ?　 　　　　　　　 　　　＿＿＿_ ?　 　　　　　　　　| ?　ヽ 　i　　i　　　 　　　　　　　／__,　 , ?-?‐-?‐＼ 　 　 　 　 　　i ?　　} ? ? 　|　　 i　　　　　　 　　／（●) ?　 ( ?● ?) ? ? ? ?＼　　　　　　 {?　 λ ? ? 　ト－┤.　　　　　　／ 　 　（__人__） 　＼　　　 ,ノ　￣ ,! ? ? 　i　　　ゝ?_ ?　　　　|　　　　　?￣` ?　 　　　　|　,. ?'??　　　,! ? ? .　ヽ、 　　　｀`　?,__＼ 　　 　 　　　　　 　 ／"　＼ 　ヽ／ 　　　＼ノ　?　　　?￣r/:::r―-?‐-?‐―/::７　　 ?　　　　／ 　 　　 　 ヽ.　　　　　　ヽ::〈； . ?'::. ?:' ?|::/　　 /　　　,. ?" ? ? 　　　　　　　 `? ?　　　　＼ヽ::. ?;::：|/　　　　　ｒ'" ? ? 　　　　　／￣二二二二二二二二二二二二二二二二ヽ 　　　　　| ?答 |　　　　　k ?n ?o ?c ?k ?o ?u ?t ?. ?j ?s　　　　　 　　│| ? ? 　　　　　＼＿二二二二二二二二二二二二二二二二ノ
别にアレを办苍辞肠办辞耻迟しても构わんだろう
もう何も怖くないし
ちょっと川の様子を見てくるよ！ 　　　/　　　　　/　　　　　/　　　　　　/　　/ ?　/ ?/ ? /　　　　　/　　　　　/　　　　　/　　　　　/ ?　　/ ? 　　　　　 　　　　　　 ????　　　,.? ?,.?　　　 /　　　/ ? 　　　　/　　　　/　　 　 　 ∠二二?ヽ　　　　/　/ ? 　　/　　　　/　　　/　　　（（ ??ω?｀））　 ? ? ? ? ? ?/ ? ? ? ?/ 　　 　　　　　　　　　　　 /　~~ ?：~~~〈　　　/ ? 　　　 　　　/　　　　/　ノ　　　：　_,,..ゝ　　　/ ? 　　　　/　　　　/　　　　 （,,..,）二i_,∠ ?　/　　　　/
fin.
次回に続く！

More Related Content

Knocked out in knockout js

AboutCopyright
? 2025 狠狠撸