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

Question

请看我的fiddlehere

我有几个单选按钮，如果选择了其中一个，我希望显示一个文本框。我已经能够使用淘汰赛实现这一目标。

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

看下面我的淘汰代码：

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

Answer 1

如果checked绑定应用于单选按钮，当参数值等于单选按钮元素的value属性时，它将设置要检查的元素。因此，您需要稍微改变一下您的思维方式并创建一个 "payment type" observable 来存储所选的支付类型，而不是您现在拥有的 boolean "is timesheet selected?" observable。然后你可以最初给这个可观察值 "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">

更新 Fiddle 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)。但这样做的正确方法是在视图模型中获取数据，正如有人在评论中所说的那样，去掉中间人。

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

Knockout.js: Set radio button value onload

javascript

radio-button

knockout.js

form-control

更新