http://www.cnblogs.com/rohelm/p/3209757.html

以列表方式呈现数据

　　 处理以数组形式储存的多条数据，要先认识foreach。在ViewModel定义一个JavaScript Array或是ko.observableArray() (observableArray在新增或剔除数组元素时，KO会立刻察觉反应到UI，普通Array则不会)，然后在某个容器元素(例如: div, ul, tbody... )声明data-bind="foreach: arrayPropName"，就可以指定KO将容器内的子元素模板(Template)就会对数组对象的数据自动循环遍历，例如:

<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" style='text-align: right'></span></td>

<td><a href='#' data-bind="click: $root.removeUser">移除</a></td>

</tr>

</tbody>

在上面的例子中，我们假设ViewModel有一个数组属性—users，其中每笔数据对象都有id, name, score三个属性，在tbody上宣告data-bind="foreach: users"，意味者<tbody>到</tbody>间的内容，会依users数组的元素多寡重复出现n次。而其中元素(如<span>, <a>)系结对象便是users中的每一条用户数据，因此只要写上data-bind="text: id"就可以对应到用户的id属性。最后一个<td>中出现了<a data-bind="click: $root.removeUser">，你一定可以猜想它可用来移除该用户数据，$root是一个特殊变量，会指向ViewModel个体。在这里必须加上的原因是我们在ViewModel定义了remoteUser方法，但在<tbody>中，默认绑定的对象是users对象，若只写data-bind="click: removeUser"，KO会误认成users对象上的removeUser方法。加上$root，KO会改由ViewModel的最上层寻找removeUser方法。

removeUser的定义如下：

self.removeUser = function(user) {

self.users.remove(user);

            }

当它在foreach范围被点击触发时，会接收到一个参数，指向被点击的那条数据对象。所以，只需self.users.remove(user)就可以将该条数据从observableArray移除，网页也会马上做出回应，该条数据的<tr>会立刻从<tbody>中消失。

如果要新增用户数据，在observableArray中加入一条具有id, name, score三个属性的对象即可，为了规范组件包含所有必要属性，我们将user定义成function模拟ViewModel形式的对象:

 function UserViewModel(id, name, score) {

            var self = this;

            self.id = id;

            self.name = name;

            self.score = score;

        }

如此新增数据时即可写成viewModel.users.push(new UserViewModel("0001", "halower", 125)),为了展现KO可以实时监控obervableArray的风吹草动，我们写一个ko.computed计算所有用户的score总和:

self.totalScore = ko.computed(function () {

var total = 0;

$.each(self.users(), function (i, u) {

total += u.score;

    });

return total;

});
并在表格最上方加上
共 <span data-bind="text: users().length"></span> 条，

合计 <span data-bind="text: totalScore"></span> 分
如此，一旦users数据有所增删，不但列表表格会马上反应，笔数及积分统计也会立刻呈现最新结果。

完整代码如下：

<!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 = name;

            self.score = 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())));

            });

            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; "/><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>

       </section>

     </section>

</body>

</html>

效果演示：

随机推荐

  1. javascript设置网页刷新或者重新加载后滚动条的位置不变

    有个同事说再javascript中你可以做任何你想做的事情,当时觉得不以为然,今天遇到个问题,就是页面重新加载后总是回到页面的顶部,如果客户只想看到他想看到的部分是怎么变化的,这个体验就好了.原本想象 ...

  2. 安卓版微信内置浏览器，<a href="tel:电话号码"></a> 这个链接失效，不能跳到拨号界面？

    https://segmentfault.com/q/1010000000318831 在URL最后面加“ #mp.weixin.qq.com ”,应该加其他qq.com的二级域名都行,估计是微信的安 ...

  3. Netty指定分隔的字符

    package org.zln.netty.five.part02; import io.netty.buffer.ByteBuf; import io.netty.buffer.Unpooled; ...

  4. Xcode7 真机调试步骤以及遇到的问题解决办法

    打开Xcode7,打开preference 添加自己的apple ID登陆上去 打开一个自己的想要运行在真机上的项目 插上自己的iPhone真机(真机没必要是最新的系统,没必要升级,我刚开始报错以为是 ...

  5. 【高清未加密】2015传智播客 最新21期c#asp.net 基础到就业班视频和源码

    [.NET]传智播客第[21]期就业班视频(高清无加密)本套2015年21期传智播客C#ASP.NET win10通用mvc+app开发视频教程附源码,是一套非常不错的asp.net自学视频教程,传智 ...

  6. netty定时器HashedWheelTimer（zz）

    http://www.tianjiaguo.com/programming-language/java-language/netty%E5%AE%9A%E6%97%B6%E5%99%A8hashedw ...

  7. 获取iOS系统版本 --- UIDevice

    UIDevice类是一个单例,其唯一的实例( [UIDevice currentDevice] ) 代表了当前使用的设备. 通过这个实例,可以获得设备的相关信息(包括系统名称,版本号,设备模式等等). ...

  8. 客户端禁用cookies后session是否还起效果

    设置session和cookies的代码(webform1.aspx) if (txtName.Text == "wlzcool") { Session["uid&quo ...

  9. [c#基础]集合foreach的必要条件和自定义集合

    引言 最近翻看了之前的学习笔记,看到foreach,记得当时老师讲的时候,有点犯浑,不是很明白,这好比,上小学时,你不会乘法口诀,但是随着时间的增长,你不自觉的都会了,也悟出个小道理,有些东西,你当时 ...

  10. EntityFramework_MVC4中EF5 新手入门教程之六 ---6.通过 Entity Framework 更新关联数据

    在前面的教程中,您将显示相关的数据 :在本教程中,您会更新相关的数据.对于大多数的关系,这个目标是可以通过更新相应的外键字段来达到的.对于多对多关系,实体框架并不直接,暴露联接表,因此您必须显式添加和 ...