從ajax打破功能加載數據

我想創建一個使用knockoutjs表的實時過濾器。我設法讓一切工作的時候靜態創建可觀測陣列是這樣的：從ajax打破功能加載數據

$(function() { 
    var assets = [ 
    {id: "1", poster: "Pic010.jpg", name: "Asset1", category: "category1", type: "Movie", popup: "1" }, 
    {id: "2", poster: "Pic06.jpg", name: "Asset2", category: "category2", type: "Movie", popup: "2" }, 
    {id: "3", poster: "Pic04.jpg", name: "Asset3", category: "category1", type: "Pop-up", popup: "3" }, 
    {id: "4", poster: "Pic07.jpg", name: "Asset4", category: "category2", type: "Pop-up", popup: "4" }, 
    {id: "5", poster: "Pic011.jpg", name: "Asset1", category: "category3", type: "Promo", popup: "5" } 
    ]; 

    var viewModel = { 
    assets: ko.observableArray(assets), 

    query: ko.observable(''), 

    search: function(value) { 
     viewModel.assets.removeAll(); 
     for(var x in assets) { 
     if(assets[x].name.toLowerCase().indexOf(value.toLowerCase()) >= 0) { 
      viewModel.assets.push(assets[x]); 
     } 
     } 
    } 
    }; 

    viewModel.query.subscribe(viewModel.search); 

    ko.applyBindings(viewModel); 
});

的jsfiddle的工作代碼：http://jsfiddle.net/7ZLdk/1/

現在，當我嘗試通過這樣的Ajax加載可觀察到的陣列數據：

var assets = []; 
    $.ajax({ 
     url: '/Assets/getJson/', 
     type: "GET", 
     dataType: 'json', 
     success: function (data) { 
      console.log(data); 
      viewModel.assets(data); 
     } 
    });

數據在當頁面加載表顯示正確，但是當我在搜索輸入開始打字，所有的數據消失。

我將不勝感激，如果有人能解釋我在AJAX負載中做的不正確？ TIA

來源

2014-06-15 Ronny vdb

你最好創建一個視圖模型的功能，所以在視圖模型僅在其自身訪問數據：

$(function() { 
    $.ajax({ 
     url: '/Assets/getJson/', 
     type: "GET", 
     dataType: 'json', 
     contentType: "application/json", 
     success: function (data) { 
      console.log(data); 
      var viewModel = new ViewModel(data); 

      ko.applyBindings(viewModel); 
     } 
    }); 
}); 

function ViewModel(assets) { 
    var self = this; 

    self.assets = ko.observableArray(assets); 
    self.allAssets = assets; 
    self.query = ko.observable(''); 

    self.search = function(value) { 
     self.assets.removeAll(); 
     for(var x in self.allAssets) { 
     if(self.allAssets[x].name.toLowerCase().indexOf(value.toLowerCase()) >= 0) { 
      self.assets.push(self.allAssets[x]); 
     } 
     } 
    }; 

    self.query.subscribe(self.search); 
}

來源

2014-06-16 03:35:47

我已經解決了這個問題。我沒有填充資產數組。這是更新的Ajax調用：

$.ajax({ 
     url: '/Assets/getJson/', 
     type: "GET", 
     dataType: 'json', 
     contentType: "application/json", 
     success: function (data) { 
      console.log(data); 
      viewModel.assets(data); 
      assets = data; // THIS WAS MISSING 
     } 
    });

來源

2014-06-15 15:39:41

從ajax打破功能加載數據

回答

相關問題