<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index2</title> <script type="text/javascript" src="js/knockout-2.2.0.debug.js"></script> <script type="text/javascript" src="js/jquery-2.1.0.js"></script> <script type="text/javascript"> //定义user数据对象 function UserViewModel(id, name, score) { var self = this; self.id = ko.observable(id); self.name = ko.observable(name); self.score = ko.observable(score); } //定义ViewModel function ViewModel() { var self = this; self.users = ko.observableArray(); //添加动态监视数组对象 self.removeUser = function(user) { self.users.remove(user); } self.totalscore = ko.computed(function() { var total = 0; $.each(self.users(), function(i, u) { total += u.score(); }) return total; }); }; $(function() { var vm = new ViewModel(); //预先添加一些数据 vm.users.push(new UserViewModel("d1", "rohelm", 121)); vm.users.push(new UserViewModel("d2", "halower", 125)); $("#btnAddUser").click( function() { vm.users.push(new UserViewModel($("#u_id").val(), $( "#u_name").val(), parseInt($("#u_score").val()))); }); $("#btnUpdateScore").click( function() { vm.users()[vm.users().length - 1].score( parseInt($("#u_score").val())).name( $("#u_name").val()).id($("#u_id").val()); }); ko.applyBindings(vm); }); </script> </head> <body> <section style="margin: 250px"> <section> ID <input type="text" id="u_id" style=" 30px"> Name <input type="text" id="u_name" style=" 30px"> Score <input type="text" id="u_score" style=" 30px"> <br /> <input value="Add" id="btnAddUser" type="button" style=" 200px; background-color: #ff6a00;" /> <br /> 共 <span data-bind="text: users().length"> </span> 条--------------合计 <span data-bind="text: totalscore"> </span> 分 </section> <section> <table> <thead> <tr> <th>ID</th> <th>Name</th> <th>Score</th> <th>Option</th> </tr> </thead> <tbody data-bind="foreach: users"> <tr> <td><span data-bind="text: id"> </span></td> <td><span data-bind="text: name"> </span></td> <td><span data-bind="text: score"> </span></td> <td><a href='#' data-bind="click: $root.removeUser"> Remove </a></td> </tr> </tbody> </table> <input value="Update测试" id="btnUpdateScore" type="button" style=" 200px; background-color: #ff6a00;" /> <br /> </section> </section> </body> </html>
界面：修改于http://www.aizhengli.com/knockoutjs-shizhan/88/knockoutjs-shishi.html
