实时反映对象属性的变化

在前一篇博客中我们使用了如下代码去新增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);

} 

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

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

完整代码如下：

 <!DOCTYPE html>

 <html>

 <head>

     <meta name="viewport" content="width=device-width" />

     <title>Index2</title>

     <script src="~/Scripts/jquery-2.0.3.js"></script>

     <script src="~/Scripts/knockout-2.3.0.js"></script>

     <script  type="text/javascript">

         //定义user数据对象

         function UserViewModel(id,name,score) {

             var self = this;

             self.id = 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(125).name("HelloWorld!");

             });

             ko.applyBindings(vm);

         });

     </script>

 </head>

 <body>

      <section style="margin:250px">

          <section>

          ID<input type="text" id="u_id" style="width:30px">

          Name<input type="text" id="u_name" style="width:30px">

          Score<input type="text" id="u_score" style="width:30px"><br/>

          <input  value="Add" id="btnAddUser" type="button" style="width: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="width:200px; background-color:#ff6a00;"/><br/>

        </section>

      </section>

 </body>

 </html>

运行效果：

备注：

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

如果你喜欢本文的话，推荐共勉，谢谢！

Knockout.js随手记(6)的更多相关文章

  1. Knockout.js随手记(2)

    计算属性 konckout.js的API文档,写的极为详细和生动,透过MVVM的运作原理,开发时只需专注于定义ViewModel逻辑,不需耗费心力处理TextBox.Select的onchange.o ...

  2. Knockout.js随手记(8)

    visible, disable, css绑定 这个例子非常简单,主要演示如何通过属性控制html元素的显示与否(visible),可用性(disable)以及根据属性添加相应的CSS样式. 先简单的 ...

  3. Knockout.js随手记(7)

    数组元素的新增/移除事件 前两篇博客已经很清楚的知道knockout.js通过observableArray()数组元素增减,可以实时的反映在UI上.当然我们想在数组增加或移除元素时加上自定义逻辑就好 ...

  4. Knockout.js随手记(5)

    以列表方式呈现数据  处理以数组形式储存的多条数据,要先认识foreach.在ViewModel定义一个JavaScript Array或是ko.observableArray() (observab ...

  5. Knockout.js随手记(4)

    动态绑定下拉列表 在<select> data-bind的options选项如果绑定到ko.observableArray(),就可以动态新增选项效果,也就是可以利用其完成常见的级联效果的 ...

  6. Knockout.js随手记(3)

    下拉菜单 <select>也是网页设计重要的一环,knockout.js(以下简称KO)也有不错的支持.针对<select>,在data-bind除了用value可对应下拉菜单 ...

  7. Knockout.js随手记(1)

    新的开始,knockout.js 1.首先去http://knockoutjs.com/index.html下载knockout.js,最新的版本是2.3 2.知道什么是Knockout?它是个Jav ...

  8. 【Knockout.js 学习体验之旅】（3）模板绑定

    本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  9. 【Knockout.js 学习体验之旅】（2）花式捆绑

    本文是[Knockout.js 学习体验之旅]系列文章的第2篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

随机推荐

  1. [Java] JSP笔记 - 自定义标签

    自定义标签的创建步骤: 自定义标签的四大功能: 自定义标签的类结构: 在 1.0 中呢, 可以将 <body-content> 的值设置为 JSP, 2.0中则不允许在自定义标签体中出现j ...

  2. 利用Tomcat内置的servlet实现文件下载功能

    起因 最近博客所在的VPS挂了又要重装系统,又要重装各种软件. 以前我也经常更换VPS,每次更换都是各种坑爹事情..比如要下载java.下载tomcat.下载mysql..........以前每次我都 ...

  3. C++ 之namespace常见用法

    一.背景 需要使用Visual studio的C++,此篇对namespace的常用用法做个记录. 二.正文 namespace通常用来给类或者函数做个区间定义,以使编译器能准确定位到适合的类或者函数 ...

  4. PHP延迟静态绑定

    类可以自下往上调用父类方法,如果需要在父类中根据不同的子类,来调用子类的方法,那么就需要延迟静态绑定.延迟静态绑定用的是保留关键词static. 所谓延迟静态绑定,顾名思义,静态调用时::符号左侧的部 ...

  5. EKF的理解

    若已知参考点(landmarks)的坐标,则状态向量中不必含有xL, 从而实现的仅为机器人在已知环境中的定位,求解大大减少(状态向量维度仅为运动状态).若想实现完整SLAM,必须将xL加入状态向量中. ...

  6. Virus.Win32.Virlock.b分析

    0x00 样本说明 分析样本是被0b500d25f645c0b25532c1e3c9741667的样本感染得到.感染前的文件是Tcpview.exe,一款windows网络连接查看工具. 感染前后文件 ...

  7. linux 下安装 mysql5.7.16安装

    1.groupadd mysql      ## 添加一个mysql组 2.useradd -r -g mysql mysql    ## 添加一个用户 3.解压缩下载的包,tar -xzvf /da ...

  8. Markdown编辑器：Typora

    现在网上的Markdown有很多,各有各的特色,同时也有各自的缺点.比如有的传图片比较麻烦,有的导出pdf需要付费,有的数学公式编辑比较麻烦等等...... 而最近接触到Typora,发现这真是一款良 ...

  9. JavaFx客户端服务器C/S架构搭建

    客户端获取服务器端软件更新版本方法: package com.platform.ui.update; import java.io.BufferedInputStream; import java.i ...

  10. Python之美--Decorator深入详解

    转自:http://www.cnblogs.com/SeasonLee/archive/2010/04/24/1719444.html 一些往事 在正式进入Decorator话题之前,请允许我讲一个小 ...