2012年8月15日 星期三

knockoutjs 8 observableArray

knockoutjs observableArray
  • observableArray是對於Array裡的項目做觀察，而非對其項目裡的屬性作觀察。
  • 他類似Flex的collectionChange，只對Array裡的項目數量變動時作用。
  • 若是你想對屬性觀察，就必須對Array內的屬性下observable。
測試範例：
<!DOCTYPE html>
<html>
<head>
<title>observable array</title>
<meta charset="UTF-8"/>
<script src="../lib/knockout-2.1.0.js"></script>
<style>
.mySpan{
display: block;
float:left;
width: 80px;
}
</style>
</head>
<body>
<div data-bind="foreach:fish" id="fishElement">
    <span data-bind="text:name" class="mySpan"></span>NT <span data-bind="text:price"></span>
    </br>
</div>
<div>
    name<input id="nameInput" type="text"/>
    </br>
    price<input id="priceInput" type="text"/>
    </br>
    <input id="addBtn" type="button" value="add"/>
    <input id="removeBtn" type="button" value="remove"/>
    </br></br></br>
    要改變的名子：<input id="newName" type="text"/></br>
    第一個項目目前name屬性值：<input id="firstItemNowName" type="text" disabled="true"/></br>
    <input id="changedProperty" type="button" value="測試改變第一個項目的name屬性"/>
</div>
<script>
(function (window, undefined) {
var $ = window.$,
ko = window.ko,
viewModels = window.viewModels || {};

viewModels.fishViewModel={
fish:ko.observableArray([
{name:'七星鱸魚',price:250},
{name:"密點石斑",price:400},
{name:"鱈魚",price:400},
{name:"黑鮪魚",price:1000},
{name:"香魚",price:50}
])
};
//加入項目按鈕參照
var addItemButton = document.getElementById('addBtn');
//移除項目按鈕參照
var removeButton = document.getElementById('removeBtn');
//更改屬性按鈕參照
var changedPropertyButton = document.getElementById('changedProperty');

var firstItemNowNameTextInput = document.getElementById('firstItemNowName');
var newNameTextInput = document.getElementById('newName');


var init = function(){
  //加入按鈕被按下
  addItemButton.onclick = function(){
var name = document.getElementById('nameInput').value;
var price = document.getElementById('priceInput').value;
if(name && price){
                          //利用knockoutjs提供的陣列操作函式加入一個fish item
                          viewModels.fishViewModel.fish.push({name:name,price:price});
                        };
                            };
  
  //移除項目按鈕被按下
   removeButton.onclick = function(){
       //移除最後一個項目
                  viewModels.fishViewModel.fish.pop();
  };

//啟動綁定
ko.applyBindings(viewModels.fishViewModel, document.getElementById('fishElement'));

//取回第一次的值呈現
firstItemNowNameTextInput.value = viewModels.fishViewModel.fish()[0].name;

//改變第一個項目的name屬性
changedPropertyButton.onclick = function(){
    var newName = newNameTextInput.value;
    if(newName && viewModels.fishViewModel.fish() &&
                            viewModels.fishViewModel.fish().length > 0){
firstItem = viewModels.fishViewModel.fish()[0];
firstItem.name = newName;
firstItemNowNameTextInput.value =
                                        viewModels.fishViewModel.fish()[0].name;
//window.alert(firstItem.name);
}
};
};
init();
})(window);
</script>
</body>
</html>

note：observableArray只對array內的項目數量變動作觀察，對於其內屬性若需要需對屬性個別加上observable。
於

沒有留言:

張貼留言