<!DOCTYPE html>
<html>
<head>
<title>屬性讀取與寫入</title>
<meta charset="UTF-8"/>
<script src="../lib/jquery-1.7.1.min.js"></script>
<script src="../lib/knockout-2.1.0.js"></script>
<script>
$(window).ready(function (){
var cats = [{name:'咕嘰',age:1,breed:'美國短毛'},
{name:'斯諾',age:1,breed:'米克斯'}];
var dog = {name:"汪汪",age:2,breed:'邊境牧羊'};
var brid = {name:"金金",age:3,breed:'太陽鸚鵡'};
//VM
var myViewModel = {
cats: ko.observableArray(cats),
dog : ko.observable(dog),
bird: ko.observable(brid),
fish: ko.observable(),
bug: ko.observable(),
horse:ko.observable(),
showName:ko.observable()
};
//啟動綁定
ko.applyBindings(myViewModel);
//連續wirte
myViewModel.fish({name:"尼莫",age:1,breed:"小丑魚"}).bug([{name:"爆爆",age:0,breed:"獨角仙"}]);
//單獨wirte
myViewModel.horse({name:"赤兔",age:2,breed:"汗血寶馬"});
//屬性讀取
var horseName = myViewModel.horse().name;
//寫入
myViewModel.showName(horseName);
});
</script>
</head>
<body>
貓咪：
<div data-bind="foreach:cats" style="margin-bottom: 10px">
名子：<span data-bind="text:name" style="margin-right: 8px"></span>
年齡：<span data-bind="text:age" style="margin-right: 8px"></span>
品種：<span data-bind="text:breed" style="margin-right: 8px"></span></br>
</div>
小狗：
<div style="margin-bottom: 10px">
名子：<span data-bind="text:dog().name" style="margin-right: 8px"></span>
年齡：<span data-bind="text:dog().age" style="margin-right: 8px"></span>
品種：<span data-bind="text:dog().breed" style="margin-right: 8px"></span>
</div>
小鳥：
<div data-bind="with:bird" style="margin-bottom: 10px">
名子：<span data-bind="text:name" style="margin-right: 8px"></span>
年齡：<span data-bind="text:age" style="margin-right: 8px"></span>
品種：<span data-bind="text:breed" style="margin-right: 8px"></span>
</div>
魚仔：
<div data-bind="with:fish" style="margin-bottom: 10px">
名子：<span data-bind="text:name" style="margin-right: 8px"></span>
年齡：<span data-bind="text:age" style="margin-right: 8px"></span>
品種：<span data-bind="text:breed" style="margin-right: 8px"></span>
</div>
小蟲：
<div data-bind="foreach:bug" style="margin-bottom: 10px">
名子：<span data-bind="text:name" style="margin-right: 8px"></span>
年齡：<span data-bind="text:age" style="margin-right: 8px"></span>
品種：<span data-bind="text:breed" style="margin-right: 8px"></span>
</div>
寶馬：
<div data-bind="with:horse" style="margin-bottom: 10px">
名子：<span data-bind="text:name" style="margin-right: 8px"></span>
年齡：<span data-bind="text:age" style="margin-right: 8px"></span>
品種：<span data-bind="text:breed" style="margin-right: 8px"></span>
</div>
Show Name：
<div data-bind="text:showName"></div>
</body>
</html>
執行結果：
貓咪：
名子：咕嘰 年齡：1 品種：美國短毛
名子：斯諾 年齡：1 品種：米克斯
小狗：名子：斯諾 年齡：1 品種：米克斯
名子：汪汪 年齡：2 品種：邊境牧羊
小鳥：
名子：金金 年齡：3 品種：太陽鸚鵡
魚仔：
名子：尼莫 年齡：1 品種：小丑魚
小蟲：
名子：爆爆 年齡：0 品種：獨角仙
寶馬：
名子：赤兔 年齡：2 品種：汗血寶馬
Show Name：
赤兔
沒有留言:
張貼留言