More Related Content Similar to Knocked out in knockout js (20) Knocked out in knockout js2. “GGoodd ffiigghhtt oonn tthhee ssiiddee
wwiitthh tthhee bbeesstt FFrraammeewwoorrkk..”
-- NNaappoolleeoonn BBoonnaappaarrttee
神は最高のフレームワークを使う側に味方する
- ナポレオン・ボナパルト
41. 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="#ffffff">popupWindow</font><br
/>
<div
style="color:#ffffff;">input.value
:
<span
id="inputResult"></span>
</div>
<buKon
onclick="closePopup()">
c
l
o
s
e
</buKon>
</div>
</div>
43. 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";
}
50. 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="#ffffff">popupWindow</font><br
/>
<div
style="color:#ffffff;">input.value
:
<span
data-‐bind="text:
inputValue()"></span></div>
<buKon
data-‐bind="click:
popupVisible(false)">
c
l
o
s
e
</buKon>
</div>
</div>
変数をSET
52. 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";
}
53. After
funcVon
AppViewModel(){
this.popupVisible
=
ko.observable(false);
this.inputValue
=
ko.observable("");
}
ko.applyBindings(new
AppViewModel());
57. 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="#ffffff">popupWindow</font><br
/>
<div
style="color:#ffffff;">ajax
data<br
/>
<span
data-‐bind="text:
ajaxData"></span></div>
<buKon
data-‐bind="click:
popupVisible(false)
">close</buKon>
</div>
</div>
58. 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());
88. こんな長いコード(500行)が
funcVon
draw(){
//draw
map
//draw
window
//
ctx.fillRect(0,
0,
SCREEN_WIDTH,
SCREEN_HEIGHT);
ctx.clearRect(0,
0,
SCREEN_WIDTH,
SCREEN_HEIGHT);
var
buff
=
0;
if(imageDrag){
buff
=
xDis
/
400
*
Math.PI
*
(-‐1);
}
for(i
=
0;
i
<
IMG_NUM;
i++){
renderOrder[i]
=
i;
if((flagInfo[renderOrder[i]].rad
+
buff)
<
0){
flagInfo[renderOrder[i]].rad
=
flagInfo[renderOrder[i]].rad
+
Math.PI
*
circleMode;
}
else
if((flagInfo[renderOrder[i]].rad
+
buff)
>
(Math.PI
*
circleMode)){
flagInfo[renderOrder[i]].rad
=
flagInfo[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
-‐
(flagInfo[renderOrder[i]].rad
+
buff))
<
Math.abs(Math.PI
/
2
-‐
(flagInfo[renderOrder[j]].rad
+
buff))){
var
tmp;
tmp
=
renderOrder[i];
renderOrder[i]
=
renderOrder[j];
renderOrder[j]
=
tmp;
}
}
}
for(i
=
0;
i
<
IMG_NUM;
i++){
if(
((flagInfo[renderOrder[i]].rad
+
buff)
>
(Math.PI
/
12))&&
((flagInfo[renderOrder[i]].rad
+
buff)
<
(Math.PI
/
12
*
11))
)
{
var
mag
=
ZOOM_MIN;
var
temp
=
Math.abs((flagInfo[renderOrder[i]].rad
+
buff)
-‐
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(flagInfo[renderOrder[i]].rad
+
buff)
+
CENTER_X
-‐
drawFlagObj[renderOrder[i]].width
/
2
/
2
*
mag),
parseInt(RADIUS_LENGTH
*
Math.sin(flagInfo[renderOrder[i]].rad
+
buff)
+
CENTER_Y
-‐
drawFlagObj[renderOrder[i]].height
/
2
/
2
*
mag),
parseInt(drawFlagObj[renderOrder[i]].width
/
2
*
mag),
parseInt(drawFlagObj[renderOrder[i]].height
/
2
*
mag)
);
}
}
centerImageNo
=
flagInfo[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++){
flagInfo[i].rad
+=
autoMoveRad;
}
autoMoveFrame++;
if(autoMoveFrame
>=
AUTO_MOVE_FRAME){
autoMoveFrame
=
0;
mapState
=
NORMAL;
//change
map
detail
var
temp
=
$(".flagTitle");
var
temp2
=
$("#VtleViewer");
var
element
=
temp[centerImageNo].cloneNode(true);
temp2.empty();
temp2.append(element);
}
}
draw();
},
1000
/
FPS);
}
}).call(this);
90. こうなる!(イメージ)
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());
93. もうこれで使えるはず!
,.へ
___
ム i
「 ヒ_i〉 ゝ 〈
ト ノ iニ(()
i
{
____
|
ヽ
i i /__, ,
-‐-‐\ i
}
| i /(●)
(
●
)
\ {、 λ
ト-┤. / (__人__) \ ,ノ  ̄ ,!
i ゝ、_
| ´ ̄`
| ,.
'´ハ ,!
. ヽ、 `` 、,__\ /" \ ヽ/
\ノ ノ ハ ̄r/:::r―-‐-‐―/::7 ノ /
ヽ. ヽ::〈; .
'::.
:'
|::/ / ,.
"
`ー 、 \ヽ::.
;:::|/ r'"
/ ̄二二二二二二二二二二二二二二二二ヽ
|
答 | k
n
o
c
k
o
u
t
.
j
s │|
\_二二二二二二二二二二二二二二二二ノ
96. ちょっと川の様子を見てくるよ!
/ / / / /
/
/
/ / / / /
/
ビュー ,.、
,.、 / /
/ / ∠二二、ヽ / /
/ / / (( ´・ω・`))
/
/
/ ~~
:~~~〈 /
/ / ノ : _,,..ゝ /
/ / (,,..,)二i_,∠
/ /