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

Question

请看我的小提琴here

我有几个单选按钮，根据是否选择其中一个按钮，我希望随后显示一个文本框。我已经能够使用淘汰赛来实现这一目标。

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

请看下面我的淘汰码：

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

Answer 1

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

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。

更新

我不建议这样做，因为它是一种向后的工作方式，但是如果您检查的绑定的初始值必须来自输入元素本身，您可以创建一个小的绑定处理程序在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)。但正确的做法是在视图模型中获取数据，并且正如有人将其放入 cmets 中那样，去掉中间人。