Knockout.js：设置单选按钮值onload

Question

请看我的小提琴here

我有几个单选按钮，并且如果选择其中一个，我想要一个文本框然后显示。我已经能够使用淘汰赛实现这一目标。

我想要发生的是当页面加载时，如果选中“时间表”单选按钮的值，我想要显示文本框。但我一直无法弄清楚如何做到这一点。谢谢你的提前。

请参阅下面的淘汰赛代码：

function K2ConsultantApprovalViewModel() {
  var self = this;
  self.timeSheetSelected = ko.observable("");
}
ko.applyBindings(new K2ConsultantApprovalViewModel());

Answer 1

如果将checked绑定应用于单选按钮，则当参数值等于单选按钮元素的value属性的参数值时，它将设置要检查的元素。因此，您需要稍微改变您的思维方式，并创建一个“支付类型”可观察，以存储所选的支付类型，而不是布尔“选择时间表？”你现在可以观察到的。然后，您可以最初为此可观察值赋予“Timesheet”值，这将是页面加载时选择的值。根据当前选择显示或隐藏任何其他元素也很简单。

function K2ConsultantApprovalViewModel() {
  var self = this;
  self.paymentType = ko.observable("Timesheet");
}

ko.applyBindings(new K2ConsultantApprovalViewModel());

绑定看起来像这样：

<input id="DisbursementsOrTimeSheet_ChoiceField0" type="radio" name="DisbursementsOrTimeSheetChoice" value="Disbursements" data-bind="checked: paymentType">

更新小提琴here。

Update

我不推荐这个，因为它是一种向后的工作方式，但是如果检查绑定的初始值必须来自input元素本身，你可以创建一个在checked绑定之前执行的小型绑定处理程序。

ko.bindingHandlers['initChecked'] = {
    init: function (element, valueAccessor, allBindings) {
        var checked = valueAccessor();
        if (element.checked) {
            checked(element.value);
        }
  }
};

然后像这样绑定：

<input id="DisbursementsOrTimeSheet_ChoiceField1" type="radio" name="DisbursementsOrTimeSheetChoice" value="Timesheet" data-bind="initChecked: paymentType, checked: paymentType" checked="checked">

它会起作用（proof）。但是这样做的正确方法是在视图模型中获取数据，并且正如有人把它放在评论中那样，切断了中间人。