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

最新推荐文章于 2020-12-20 02:03:40 发布

weixin_30699235

最新推荐文章于 2020-12-20 02:03:40 发布

阅读量303

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/yzeng/p/3844306.html

版权

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和示例下载

转载于:https://www.cnblogs.com/yzeng/p/3844306.html

weixin_30699235

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
knockout更新列表中的某条数据，knockout.js绑定数组时更新其中一条数据

knockout是一款前端实现MVVM的JS框架，仅knockout.js一个47kb的文件，相当实用，做前端无刷新页面，快速实现JS与HTML数据交互。knockout目前最新版：knockout-3.1.0.js关于knockout可以去官网学习，官网内容很丰富，讲的很详细，可在线学习knockout官网：http://knockoutjs.com/本文主要讲官网没有提到的更新...
复制链接

扫一扫