KnockoutJS (一)Json动态增删

来源：互联网发布：java ll 1 编辑：程序博客网时间：2024/05/08 20:50
<!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>
0 0