淘汰赛：ko observable 没有默认值

Question

我刚刚学习淘汰赛，偶然发现了使用列表的教程。

function SeatReservation(name, initialMeal) {
    var self = this;
    self.name = name;
    self.meal = ko.observable(initialMeal);

    self.formattedPrice = ko.computed(function() {
        var price = self.meal().price;
        return price ? "$" + price.toFixed(2) : "None";        
    });
}

在教程中，这段代码定义了一个可观察的饭菜，它将是下拉选择中的选择。如果我没有默认值，例如我想使用单选组而不是选择。我希望能够创建一个没有任何默认值的 observable。我尝试使用空字符串作为默认值，然后它可以工作

self.meal = ko.observable("");

而如果我尝试将 null 作为默认值，则选择选项甚至不会出现。

self.meal = ko.observable(null); // not working

在没有默认值的情况下创建 observable 的正确方法是什么？

Answer 1

当然，您可以使用

将您的 observable 初始化为 null

 self.meal = ko.observable(null);

或undefined 与

 self.meal = ko.observable();

但是在这种情况下，您必须处理 meal 时的情况，如果实际上是 null 或 undefined，因为当您编写类似 self.meal().price; 的内容时，它会抛出异常，因为您尝试访问“无”的属性。

所以你需要修复 formattedPrice 计算：

self.formattedPrice = ko.computed(function() {
    if (!self.meal())
        return "None";
    var price = self.meal().price;
    return price ? "$" + price.toFixed(2) : "None";        
});    

计算 totalSurcharge 以检查 self.meal() 情况：

self.totalSurcharge = ko.computed(function() {
   var total = 0;
   for (var i = 0; i < self.seats().length; i++)
   {
       if (self.seats()[i].meal())
       total += self.seats()[i].meal().price;
   }
   return total;
}); 

演示JSFiddle.

注意：它偶然使用了空字符串（因为空字符串是一个对象，因此访问它们的属性是有效的，例如self.meal().price，但是所有这些都将返回未定义）所以它不是一个正确的解决方案.