对 null 进行淘汰赛可观察检查

Question

我想知道是否有办法在尝试将数据放入 observable 之前进行剔除检查以查看数据是否为 ​​null？

现在我这样做：

if (!data.Filename) {
    this.FileName = ko.observable("");
}
else {
    this.FileName = ko.observable(data.Filename);
}

否则数据中的空值将导致整个属性不显示。有没有办法使用扩展器或我可以添加一个空检查而不必对每个属性都这样做的东西？我的数据在我无法控制的随机位置有空值，我不希望该属性不显示，因为数据集中的一行具有该属性的空值。

似乎应该有更好的方法来做到这一点。

Answer 1

嘿

有很多方法可以做到这一点。我会做的是

var self = this;
self.fileName = ko.observable(data.Filename);
self.fileNameComputed = ko.computed(function(){
       return self.fileName() || ""
});

然后，在您的标记中引用计算的而不是可观察的。

Answer 2

在 Javascript 中还有其他可用的模式来执行此操作。

第一个也是最简单的，类似于 C# 中的 ?? 运算符：

function ViewModel(data)  {
  data = data || {};
  this.Filename .observable(data.Filename || "");
}

|| 运算符将返回左操作数，除非它是 falsy，然后它会回退到第二个参数。我上面的例子将：

1. 确保data 本身“至少”是一个空对象（其中.Filename 未定义）；
2. 确保ko.observable(...) 的输入“至少”是空字符串。

second 选项是使用默认选项。一个利用 jQuery 合并输入数据和默认选项的例子：

var defaultData = {
  Filename: "enter-a-file" // could also be empty string of course!
};

function ViewModel(data)  {
  var dto = $.extend({}, defaultData, data);
  this.Filename = ko.observable(dto.Filename);
}

这会将data“折叠”成defaultData，并将结果折叠成一个空的、新鲜的对象，确保dto 变量保存合并的结果。然后，您的函数的其余部分可以安全地假设一个完全填充的输入变量。

我要提到的第三个也是最后一个选项是QBM5's answer 的混音，但我同意if you can use a pureComputed 的评论者的观点（在您的示例中，这非常好），你可能应该：

function ViewModel(data)  {
  var self = this;
  data = data || {};
  this.Filename = ko.observable(data.Filename);
  this.FilenameText = ko.pureComputed(function() {
    return self.Filename() || "";
  });
}

---

PS。您没有提到您提到的潜在问题，因为您在 this 和 data 上分别用不同的大小写拼写了 FileName 和 Filename，不是吗？ ;-)