淘汰赛：没有默认值的 ko observable

Question

我刚刚在学习 knockout，看到了使用列表的教程。

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";        
    });
}

在本教程中，此代码定义了可观察的一餐，这将是 select 在下拉列表 select 中的选择。如果我没有默认值，例如我想使用无线电组而不是 select。我希望能够创建一个没有任何默认值的可观察对象。我尝试使用空字符串作为默认值，然后就可以了

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

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

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

创建没有默认值的可观察对象的正确方法是什么？

Answer 1

当然你可以用

将你的 observable 初始化为 null

 self.meal = ko.observable(null);

或undefined与

 self.meal = ko.observable();

但是在这种情况下，如果实际上是 null 或 undefined，您必须处理 meal 的情况，因为当您编写类似 [=19 的内容时=] 它会抛出异常，因为你试图访问属性 of "nothing".

所以你需要修复 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 但是所有这些都将 return 未定义) 所以这不是一个合适的解决方案。

淘汰赛：没有默认值的 ko observable

knockout: ko observable without a default value

javascript

knockout.js