Question

我正在尝试使用knockoutjs在表上创建实时过滤器。当我静态创建这样的可观察数组时，我已设法让一切工作正常：

$(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 of working code：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

Answer 1

我已经解决了这个问题。我没有填充资产数组。这是更新的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
        }
    });

Answer 2

您最好创建一个ViewModel函数，因此viewmodel只访问其自身内的数据：

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

从ajax加载数据会破坏功能

2 个答案: