Question

我有一个Table，其中的Data根据某些条件动态变化。我希望获得一些数据，例如单击按钮。

    if(true){
       Show: ABC Data
}
       else{
        Show XYZ Data
        }

这是我用来扩展功能的Fiddle，但是很遗憾，我坚持了这一要求。

Answer 1

在viewmodel构造函数中，您已经定义了一些有关如何加载数据的逻辑：

self.items = ko.observableArray(data.map(function(i) {
  return new rowModel(i.id, i.name, i.status);
}));

由于items是一个可观察的数组，因此您可以随时更新其内容！

让我们将映射逻辑移至一个单独的函数：

self.loadData = function(rawData) {
  var viewmodels = rawData.map(function(d) {
    return new RowModel(d.id, d.name, d.status);
  });

  self.items(viewmodels);
};

在构造函数中，您现在可以像这样加载初始数据：

self.items = ko.observableArray();
self.loadData(data);

在按钮的click回调中，您将重复使用我们新的loadData方法：

self.changeTableData = function() {
  if (someCondition()) {
    self.loadData([ /* ... */ ]);
  } else {
    self.loadData([ /* ... */ ]);
  }
}

可选：

出于纯粹的美学原因，我通常定义一个静态构造函数帮助程序以方便进行映射：

RowModel.fromRawDataPoint = function(dataPoint) {
  return new RowModel(dataPoint.id, dataPoint.name, dataPoint.status);
};

我将构造函数中定义的函数移至VM的原型：

MyVM.prototype.loadData = function(rawData) {
  this.items(rawData.map(RowModel.fromRawDataPoint));
};

这是更新的小提琴：https://jsfiddle.net/975ncawv/

淘汰赛：如何根据某些条件更改同一模型的数据

1 个答案: