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

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)