从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打破功能加载数据

回答

相关问题