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

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

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

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

knockout官網:http://knockoutjs.com/學習

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

這樣就能夠實現刷新。spa

原理就是將要更新的對象拷貝副本,更新副本,再調用replace方法將要更新的對象替換爲副本對象。replace方法是官方API提供的,一旦調用成功就會刷新頁面。prototype

knockout和示例下載code

相關文章
相關標籤/搜索