CODEWITHSUNDEEP
javascriptjqueryknockout.js
Masoud Andalibi
Masoud Andalibi

Reputation: 3228

Data not binding as it should be after calling ajax with knockoutjs

I have this grid that i am creating using knockoutjs, it works perfectly at first, now i am using a window.location.hash to run another query, it works too and query returns the correct amount of data however when i insert it within the observableArray (which gets inserted correctly as well), the grid doesn't update the data and shows the old data... I'm using removeAll() function on the observableArray as well before inserting new set of data but it wont update my grid, i suspect there is something wrong with the DOM? I should mention when i reload the page (since the page's url keeps the hash for query) my grid shows the data and works perfectly. for some reason it needs to reload the page and doesn't work without,

Here is my JS: 

if (!ilia) var ilia = {};

ilia.models = function () {
    var self = this;
    this.pageCount = ko.observable(0);

    //this is the observableArray that i am talking about ++++++++
    this.items = ko.observableArray();
    var $pagination = null;
    var paginationConfig = {
        startPage: 1,
        totalPages: 20,
        onPageClick: function (evt, page) {
            self.generateHash({ pageNum: page });
            self.getData();
        }
    }
    var hashDefault = {
        pageNum: 1,
        pageSize: 20,
        catId: null,
        search: ""
    }
    this.dataModel = function (_id, _name, _desc, _thumb, _ext) {
        var that = this;
        this.Id = ko.observable(_id);
        this.Name = ko.observable(_name);
        this.Desc = ko.observable(_desc);
        this.Url = '/site/ModelDetail?id=' + _id;

        var b64 = "data:image/" + _ext + ";base64, ";
        this.thumb = ko.observable(b64 + _thumb);
    }
    this.generateHash = function (opt) {
        //debugger;
        var props = $.extend(hashDefault, opt);
        var jso = JSON.stringify(props);
        var hash = window.location.hash;
        var newHash = window.location.href.replace(hash, "") + "#" + jso;
        window.location.href = newHash;
        return jso;
    }

    this.parseHash = function () {

        var hash = window.location.hash.replace("#", "");
        var data = JSON.parse(hash);
        if (data)
            data = $.extend(hashDefault, data);
        else
            data = hashDefault;
        return data;
    }

    var _cntrl = function () {
        var _hdnCatName = null;
        this.hdnCatName = function () {
            if (_hdnCatName == null)
                _hdnCatName = $("hdnCatName");
            return _hdnCatName();
        };

        var _grid = null;
        this.grid = function () {
            if (_grid == null || !_grid)
                _grid = $("#grid");
            return _grid;
        }

        this.rowTemplate = function () {
            return $($("#rowTemplate").html());
        }
    }
    this.createPagnation = function (pageCount, pageNum) {
        $pagination = $('#pagination-models');
        if ($pagination && $pagination.length > 0)
            if (paginationConfig.totalPages == pageCount) return;

        var currentPage = $pagination.twbsPagination('getCurrentPage');
        var opts = $.extend(paginationConfig, {
            startPage: pageNum > pageCount ? pageCount : pageNum,
            totalPages: pageCount,
            onPageClick: self.pageChange
        });

        $pagination.twbsPagination('destroy');
        $pagination.twbsPagination(opts);
    }
    this.pageChange = function (evt, page) {
        var hash = self.parseHash();
        if (hash.pageNum != page) {
            self.generateHash({ pageNum: page });
            self.getData();
        }
    }

    this.getData = function () {
        var _hash = self.parseHash();
        inputObj = {
            pageNum: _hash.pageNum,
            pageSize: _hash.pageSize,
            categoryId: _hash.catId
        }
        //debugger;
        //console.log(_hash);

        if (inputObj.categoryId == null) {
            ilia.business.models.getAll(inputObj, function (d) {
                //debugger;
                if (d && d.IsSuccessfull) {
                    self.pageCount(d.PageCount);
                    self.items.removeAll();
                    _.each(d.Result, function (item) {
                        self.items.push(new self.dataModel(item.ID, item.Name, item.Description, item.Thumb, item.Extention));
                    });

                    if (self.pageCount() > 0)
                        self.createPagnation(self.pageCount(), inputObj.pageNum);
                }
            });
        }
        else {
            ilia.business.models.getAllByCatId(inputObj, function (d) {
                if (d && d.IsSuccessfull) {
                    self.pageCount(d.PageCount);
                    self.items.removeAll();
                    console.log(self.items());
                    _.each(d.Result, function (item) {
                        self.items.push(new self.dataModel(item.ID, item.Name, item.Description, item.Thumb, item.Extention));
                    });
                    // initializing the paginator
                    if (self.pageCount() > 0)
                        self.createPagnation(self.pageCount(), inputObj.pageNum);
                    //console.log(d.Result); 
                }
            });
        }


    }
    this.cntrl = new _cntrl();

};

And Initialize:

ilia.models.inst = new ilia.models();

$(document).ready(function () {

    if (!window.location.hash) {
        ilia.models.inst.generateHash();
        $(window).on('hashchange', function () {
            ilia.models.inst.getData();
        });

    }
    else {
        var obj = ilia.models.inst.parseHash();
        ilia.models.inst.generateHash(obj);
        $(window).on('hashchange', function () {
            ilia.models.inst.getData();
        });

    }

    ko.applyBindings(ilia.models.inst, document.getElementById("grid_area"));
    //ilia.models.inst.getData();
});

Upvotes: 0

Views: 66

Answers (1)

Max
Max

Reputation: 137

Would perhaps be useful to see the HTML binding here as well. Are there any console errors? Are you sure the new data received isn't the old data, due to some server-side caching etc?

Anyhow, if not any of those:

Are you using deferred updates? If the array size doesn't change, I've seen KO not being able to track the properties of a nested viewmodel, meaning that if the array size haven't changed then it may very well be that it ignores notifying subscribers. You could solve that with

self.items.removeAll();
ko.tasks.runEarly();
//here's the loop

If the solution above doesn't work, could perhaps observable.valueHasMutated() be of use? https://forums.asp.net/t/2056128.aspx?What+is+the+use+of+valueHasMutated+in+Knockout+js

Upvotes: 2

Related Questions