knockout是一款前端实现MVVM的JS框架，仅knockout.js一个47kb的文件，相当实用，做前端无刷新页面，快速实现JS与HTML数据交互。

knockout目前最新版：knockout-3.1.0.js

关于knockout可以去官网学习，官网内容很丰富，讲的很详细，可在线学习

knockout官网：http://knockoutjs.com/

本文主要讲官网没有提到的更新列表中的数据，绑定列表时，其中某条数据发生了变化页面无法及时刷新，其实官方没有提供刷新功能，于是我们用了一点小技巧来实现数据更新后刷新，而不用重新绑定整个列表：

<body>

    <div data-bind="foreach:datas">

        <p>

            <span data-bind="text:n"></span> :

            <span data-bind="text:a"></span>

            <button data-bind="click:$parent.click">换</button>

        </p>

    </div>

</body>

<script>

    function ViewModel() {

        var self = this;

        this.datas = ko.observableArray([

            { n: "ad", a: "yes" },

            { n: "zs", a: "no" },

            { n: "ls", a: "no" }

        ]);

        self.click = function () {

            //拷贝当前点击对象到tmp，更改tmp需要更新的值，将this替换为tmp

            var tmp = this.clone();

            tmp.a = tmp.a == "yes" ? "no" : "yes";

            self.datas.replace(this, tmp);

        }

    };

    ko.applyBindings(new ViewModel());

    //克隆对象

    Object.prototype.clone = function () {

        var obj = {};

        for (var p in this)

            obj[p] = this[p];

        return obj;

    };

</script>

这样就可以实现刷新。

原理就是将要更新的对象拷贝副本，更新副本，再调用replace方法将要更新的对象替换为副本对象。replace方法是官方API提供的，一旦调用成功就会刷新页面。

knockout和示例下载

knockout更新列表中的某条数据，knockout.js绑定数组时更新其中一条数据的更多相关文章

  1. sql 更新列表中最老的一条数据

    今天组长给个任务说要给摄像头触发一个列表.让缓存5条数据,每次摄像头触发更新一条,丢掉最老的一条数据.原来的update是直接更新掉一条,没带缓存的.然后搞了个sql语句,是这样的: UPDATE C ...

  2. 常用JS效果 需要时更新。。。

    1.手风琴效果 JS: $(function() {     var aMenuOneLi = $(".menu-one > li");     var aMenuTwo = ...

  3. Jquery EasyUI中treegrid的中右键菜单和一般按钮同时绑定事件时的怪异事件

    做个项目使用jquery  easyui来做前端,也许是对此不是很熟悉,总是发现一些不可理解的事件. 主要源代码如下: <script type="text/javascript&qu ...

  4. Knockout js 绑定 radio 时，当绑定整形的时候，绑定不生效

    解决方案: 使用checkedValue和checked 组合,如下代码. <div><input type="radio" name="flavorG ...

  5. js 小数计算时出现多余的数据

    根据资料显示:是由于十进制换算成二进制,处理后,再由二进制换算成十进制时,造成的误差. 得出:所以(0.1+0.2)!=0.3 而是=0.30000000000000004的结果 解决方法: 参考:h ...

  6. js遍历map匹配数据和js遍历数组匹配map数据

    var __LocalDataCities = { list: { "010": ["北京", "BEIJING"], "0100 ...

  7. vue单页应用中 返回列表记住上次滚动位置、keep-alive缓存之后更新列表数据 那点事

    实践场景需求 产品列表中,滚动到一定位置的时候,点击查看产品信息,后退之后,需要回到原先的滚动位置,这是常见的需求 所有页面均在router-view中,暂时使用了keep-alive来缓存所有页面, ...

  8. Loadrunner Vugen参数列表中数据分配方法及更新值的时间9种组合说明及验证

    作为刚开始学习Loadrunner的新人,Data Assignment Method以及Update Method在相互组合之后,LR如何进行取值让我很是头疼. 于是花了一个晚上的时间认真学习官方文 ...

  9. SQL批量更新数据库中所有用户数据表中字段类型为tinyint为int

    --SQL批量更新数据库中所有用户数据表中字段类型为tinyint为int --关键说明:--1.从系统表syscolumns中的查询所有xtype='48'的记录得到类型为[tinyint]的字段- ...

随机推荐

  1. 个人JS体系完善（一）

    个人JS体系整理(一) 一. 原型 JS每声明一个Function,都有Prototype原型,Prototype原型是函数的一个默认属性,在函数的创建过程中由JS编译器自动添加,也就是说每当生产一个 ...

  2. 不准使用xib自定义控制器view的大小

    1.AppDelegate.m // // 文 件 名:AppDelegate.m // // 版权所有:Copyright © 2018年 leLight. All rights reserved. ...

  3. 分层最短路-2018南京网赛L

    大概题意: 题意:N个点,M条带权有向边,求将K条边权值变为0的情况下,从点1到点N的最短路. 拓展:可以改变K条边的权值为x 做法:把每个点拆成k个点,分别表示还能使用多少次机会,构造新图. 实际写 ...

  4. P4196 [CQOI2006]凸多边形 半平面交

    \(\color{#0066ff}{题目描述}\) 逆时针给出n个凸多边形的顶点坐标,求它们交的面积.例如n=2时,两个凸多边形如下图: 则相交部分的面积为5.233. \(\color{#0066f ...

  5. 数据结构1：数据结构与算法C语言版分析概述

    本节开始将带领大家系统地学习数据结构,作为一门计算机专业大二学生的必修课程,该课程面对的目标人群为初步具备基本编程能力和编程思想的程序员(大一接触了 C 语言或者 C++).通过系统地学习数据结构,可 ...

  6. C++基础学习8：类的定义(class)

    先来说说C和C++中结构体的不同 a) C语言中的结构体不能为空,否则会报错(??) b) C语言中内存为空结构体分配大小为0,C++中为结构体和类分配大小为1byte c) C语言中的结构体只涉及到 ...

  7. [USACO08NOV]安慰奶牛Cheering up the Cow BZOJ 1232 Kruskal

    Farmer John变得非常懒, 他不想再继续维护供奶牛之间供通行的道路. 道路被用来连接N (5 <= N <= 10,000)个牧场, 牧场被连续地编号为1..N. 每一个牧场都是一 ...

  8. [转载]sscanf函数

    来源:http://c.biancheng.net/cpp/html/296.html 头文件:#include <stdio.h> sscanf()函数用于从字符串中读取指定格式的数据, ...

  9. 下载GitHub仓库的某个子文件夹

    http://downgit.zhoudaxiaa.com/#/home

  10. error : Could not load UI satellite dll 'TrackerUI.dll'. Make sure it exists in an LCID subdirectory of 'C:\Program Files (x86)\MSBuild\12.0\bin\'.

    原因  VS2013 + QT环境部署好后, 又安装了VS2015\ 解决方案:  在另一台电脑里重装VS2013, 并将  C:\Program Files (x86)\MSBuild\12.0\B ...