Knockoutjs Click Binding
example 1:
<!DOCTYPE html>
<html>
<head>
<title>click Binding</title>
<meta charset="UTF-8"/>
<style>
*{
margin: 0px 0px 0px 0px;
}
.cube{
width: 100px;
height:100px;
background-color:#0000FF; /**bule*/
}
</style>
</head>
<body>
<script src="../lib/knockout-2.1.0.js"></script>
<script>
(function(window , undefined ){
var ko = window.ko,
manager = window.manager || {};
manager.viewModel = {
colorControl:{
//property
redControlName:ko.observable('紅色'),
greenControlName:ko.observable('綠色'),
//method
changeColorByRed:function(){
document.getElementById('myCube').style.backgroundColor = '#FF0000';
},
changeColorByGreen:function(){
document.getElementById('myCube').style.backgroundColor = '#00FF00';
}
}
};
window.manager = manager;
})(window);
window.onload = function(){
ko.applyBindings( manager.viewModel);
};
</script>
<div class="cube" id="myCube"></div>
<div data-bind="with:colorControl">
<input type="button" data-bind="click:changeColorByRed , value:redControlName"></button>
<input type="button" data-bind="click:changeColorByGreen , value:greenControlName"></button>
</div>
</body>
</html>
結果：
click前
按下紅色：
按下綠色：
第一種就是非物件觀念的寫法，只是為了把功能寫出來。
接下來同樣程式使用不同概念撰寫結構：
example2：
<!DOCTYPE html>
<html>
<head>
<title>click Binding</title>
<meta charset="UTF-8"/>
<style>
*{
margin: 0px 0px 0px 0px;
}
.cube{
width: 100px;
height:100px;
background-color:#0000FF; /**bule*/
}
</style>
</head>
<body>
<script src="../lib/knockout-2.1.0.js"></script>
<script>
(function(window , undefined ){
var ko = window.ko,
manager = window.manager || {};
manager.viewModel = {
//陣列ko
colorControls: ko.observableArray([{
//property
controlName:ko.observable('紅色'),
//method
changeColor:function(){
document.getElementById('myCube').style.backgroundColor = '#FF0000';
}
},{
//property
controlName:ko.observable('綠色'),
//method
changeColor:function(){
document.getElementById('myCube').style.backgroundColor = '#00FF00';
}
}
])
};
window.manager = manager;
})(window);
window.onload = function(){
ko.applyBindings( manager.viewModel);
};
</script>
<div class="cube" id="myCube"></div>
<div data-bind="foreach:colorControls">
<input type="button" data-bind="click:changeColor , value:controlName"></button>
</div>
</body>
</html>
example2具有物件開發觀念，在意義上不需再new一次，書本或網路文章都可找到使用new不直覺且效能上較不好一點，但文章吸收完還得活用，你可以想若是這個項目非常多時，開發者要打很多字且都是非常相像的程式碼。
再來這是另一種方法：
example3:
<!DOCTYPE html>
<html>
<head>
<title>click Binding</title>
<meta charset="UTF-8"/>
<style>
*{
margin: 0px 0px 0px 0px;
}
.cube{
width: 100px;
height:100px;
background-color:#0000FF; /**bule*/
}
</style>
</head>
<body>
<script src="../lib/knockout-2.1.0.js"></script>
<script>
(function(window , undefined ){
var ko = window.ko,
manager = window.manager || {};
function ColorControl(colorName , colorValue , target){
this.controlName = colorName;
this.colorValue = colorValue;
this.target = target;
};
ColorControl.prototype.changeColor = function(){
this.target.style.backgroundColor = this.colorValue;
};
manager.viewModel = {
colorControls: ko.observableArray([])
};
manager.init = function(){
manager.viewModel.colorControls.push(
new ColorControl("紅色","#FF0000",document.getElementById('myCube'))
);
manager.viewModel.colorControls.push(
new ColorControl("綠色", "#00FF00",document.getElementById('myCube'))
);
};
window.manager = manager;
})(window);
window.onload = function(){
manager.init();
ko.applyBindings( manager.viewModel);
};
</script>
<div class="cube" id="myCube"></div>
<div data-bind="foreach:colorControls">
<input type="button" data-bind="click:changeColor , value:controlName"></button>
</div>
</body>
</html>
總之對於程式編成還有非常多不懂，再往前進後也許又會發現現在自己所想的是錯誤的，
前輩說見山是山，見山又不是山。
