knockout更新列表中的某條數據，knockout.js綁定數組時更新其中一條數據

時間 2019-11-08

標籤 knockout 更新列表數據 knockout.js 綁定數組其中一條欄目 JavaScript 简体版

原文原文鏈接

knockout是一款前端實現MVVM的JS框架，僅knockout.js一個47kb的文件，至關實用，作前端無刷新頁面，快速實現JS與HTML數據交互。前端

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

關於knockout能夠去官網學習，官網內容很豐富，講的很詳細，可在線學習框架

本文主要講官網沒有提到的更新列表中的數據，綁定列表時，其中某條數據發生了變化頁面沒法及時刷新，其實官方沒有提供刷新功能，因而咱們用了一點小技巧來實現數據更新後刷新，而不用從新綁定整個列表：this

<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>