數據沒有綁定，因爲它應該在與knockoutjs調用ajax後

Question

我有這個網格，我使用knockoutjs創建，它起初工作完美，現在我使用window.location.hash運行另一個查詢，它的工作原理和查詢返回正確的數據量，但是當我插入observableArray（它也插入正確），網格不會更新數據並顯示舊數據...我在observableArray上使用removeAll()函數以及在插入新的數據集，但它不會更新我的網格，我懷疑有什麼錯誤的DOM？ 我應該提到當我重新加載頁面時（因爲頁面的URL保留查詢的散列）我的網格顯示數據並且完美地工作。由於某種原因，它需要重新加載頁面，而不會不工作，

這裏是我的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(); 

}; 

和初始化：

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(); 
}); 

Answer 1

或許應該看到HTML有用在這裏綁定。 是否有任何控制檯錯誤？由於某些服務器端緩存等原因，您確定收到的新數據不是舊數據嗎？

總之，如果沒有任何這些：

是否使用deferred updates？如果數組大小沒有改變，我已經看到KO無法跟蹤嵌套視圖模型的屬性，這意味着如果數組大小沒有改變，那很可能它會忽略通知訂閱者。你可以用

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

如果上面的解決方案不起作用，可能observable.valueHasMutated（）有用嗎？ https://forums.asp.net/t/2056128.aspx?What+is+the+use+of+valueHasMutated+in+Knockout+js