Knockout.js随手记(6)_.NET_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > .NET > Knockout.js随手记(6)

Knockout.js随手记(6)

 2013/7/24 22:43:19  Halower  博客园  我要评论(0)
  • 摘要:实时反映对象属性的变化在前一篇博客中我们使用了如下代码去新增user对象,即push方法:$("#btnAddUser").click(function(){vm.users.push(newUserViewModel($("#u_id").val(),$("#u_name").val(),parseInt($("#u_score").val())));});使用ko.computed去动态的计算user对象的socre属性的总和,前面有朋友问到修改之类的问题
  • 标签:JS

实时反映对象属性的变化

在前一篇博客中我们使用了如下代码去新增user对象,即push方法:

$("#btnAddUser").click(function () { 
                vm.users.push(new UserViewModel(
                    $("#u_id").val(),
                    $("#u_name").val(),
                    parseInt($("#u_score").val())));
            });

使用 ko.computed去动态的计算user对象的socre属性的总和,前面有朋友问到修改之类的问题,我们尝试着添加一个按钮利用下面的代码试试:

$("#btnUpdateScore").click(function () { 
     vm.users()[0].score = 125; 
}); 

我们发现丝毫没有反应,其实就是我们想当然的认为使用了 ko.observableArray()就可以自动检测属性,其实他只是监控对象,而不是对象中的属性,因此,要让对象的属性也成为监控属性的话,我们就要回过头来使用ko.observable(),只要稍微已修改里面就OK了:

function UserViewModel(id, name, score) { 
var self = this; 
self.id = id; 
self.name = ko.observable(name); 
//改为observalbe 
self.score = ko.observable(score); 
} 

$("#btnChgScore").click(function () { 
//设定内容
vm.users()[0].score(125).name("HelloWorld!"); 
});

 我们来修改新增对象的score和name来看看效果如何:

完整代码如下: 

 1 <!DOCTYPE html>
 2 
 3 <html>
 4 <head>
 5     <meta name="viewport" content="width=device-width" />
 6     <title>Index2</title>
 7     <script src="~/Scripts/jquery-2.0.3.js"></script>
 8     <script src="~/Scripts/knockout-2.3.0.js"></script>
 9     <script  type="text/javascript">
10         //定义user数据对象
11         function UserViewModel(id,name,score) {
12             var self = this;
13             self.id = id;
14             self.name =ko.observable(name);
15             self.score =ko.observable(score);
16         }
17         //定义ViewModel
18         function ViewModel() {
19             var self = this;
20             self.users = ko.observableArray();//添加动态监视数组对象
21             self.removeUser = function (user) {
22                 self.users.remove(user);
23             }
24             self.totalscore = ko.computed(function () {
25                 var total = 0;
26                 $.each(self.users(), function (i, u) {
27                     total += u.score();
28                 })
29                 return total;
30             });
31             };
32         $(function () {
33             var vm = new ViewModel();
34             //预先添加一些数据
35             vm.users.push(new UserViewModel("d1", "rohelm", 121));
36             vm.users.push(new UserViewModel("d2", "halower", 125));
37             $("#btnAddUser").click(function () { 
38                 vm.users.push(new UserViewModel(
39                     $("#u_id").val(),
40                     $("#u_name").val(),
41                    parseInt($("#u_score").val())));
42             });
43             $("#btnUpdateScore").click(function () {
44                 vm.users()[vm.users().length-1].score(125).name("HelloWorld!");
45             });
46             ko.applyBindings(vm);
47         });
48     </script>
49 </head>
50 <body>
51      <section style="margin:250px">
52          <section>
53          ID<input type="text" id="u_id" style="width:30px">
54          Name<input type="text" id="u_name" style="width:30px">
55          Score<input type="text" id="u_score" style="width:30px"><br/>
56          <input  value="Add" id="btnAddUser" type="button" style="width:200px; background-color:#ff6a00;"/><br/>
57            共 <span data-bind="text: users().length"></span> 条--------------合计 <span data-bind="text: totalscore"></span>58        </section>
59        <section>
60            <table>
61             <thead>
62                 <tr><th>ID</th><th>Name</th><th>Score </th><th>Option</th></tr>
63             </thead>
64             <tbody  data-bind="foreach: users">
65                 <tr>
66                     <td><span data-bind="text: id"></span></td>
67                     <td><span data-bind="text: name"></span></td>
68                     <td><span data-bind="text: score"></span></td>
69                     <td><a href='#' data-bind="click: $root.removeUser">Remove</a></td>
70                 </tr>
71             </tbody>
72         </table>
73             <input  value="Update测试" id="btnUpdateScore" type="button" style="width:200px; background-color:#ff6a00;"/><br/>
74        </section>
75      </section>
76 </body>
77 </html>

 运行效果:

备注:

    本文版权归大家共用,不归本人所有,所有知识都来自于官网支持,书本,国内外论坛,大牛分享等等......后续将学习knockout.js的常用功能。

                                                                  如果你喜欢本文的话,推荐共勉,谢谢!

 

发表评论
用户名: 匿名