<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="jquery-1.7.1.min.js"></script>
<script src="knockout-3.4.0.js"></script>
<script type="text/javascript">
var cmyk=[
{
colorName:"cyan",
value:"100,0,0,0"
},
{
colorName:"magenta",
value:"0,100,0,0"
},
{
colorName:"yellow",
value:"0,0,100,0"
},
{
colorName:"black",
value:"0,0,0,100"
}
];
$(function(){
function viewModel(){
var self=this;
self.newColorName=ko.observable("noname");
self.newValue=ko.observable("novalue");
self.myColors=ko.observableArray(cmyk);
self.addColor=function()
{
self.myColors.push({colorName:this.newColorName,value:this.newValue});
};
self.removeColor=function()
{
self.myColors.remove(this);
};
};
ko.applyBindings(new viewModel());
})
</script>
</head>
<body>
<h3>印刷颜色</h3>
<ul data-bind="foreach:myColors">
<li>序号:<span data-bind="text:$index"></span>:
颜色名称：<span data-bind="text:colorName"></span>
色值:<span data-bind="text:value"></span>
<a href="javascript:void(0)" data-bind="click:$parent.removeColor">删除此颜色</a>
</li>
</ul>
<br/>
<p>添加一个颜色</p>
<input type="text" name="" data-bind="value:newColorName">
<input type="text" name="" data-bind="value:newValue">
<button data-bind="click:addColor">添加</button>
</body>
</html>
1262
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
