Knockout.js: установить значение радиокнопки при загрузке

Question

Пожалуйста, смотрите мою скрипку здесь

У меня есть несколько переключателей, и в зависимости от того, выбрана ли одна из них, я хочу, чтобы текстовое поле затем отображалось. Я смог добиться этого с помощью нокаута.

Я хочу, чтобы при загрузке страницы отмечалось значение переключателя «Расписание», чтобы было отображено текстовое поле. Но я не смог понять, как это сделать. Спасибо заранее.

См. Ниже мой код выбивания:

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

Answer 1

Если привязка checked применена к переключателю, будет установлен проверяемый элемент, когда значение параметра равно значению атрибута value элемента переключателя.Таким образом, вам нужно немного изменить свой образ мышления и создать наблюдаемый «тип платежа», в котором будет храниться выбранный тип платежа, а не логическое «выбрано ли расписание?»Наблюдаемое что у тебя сейчас.Затем вы можете изначально присвоить этой наблюдаемой значение «Расписание», и это будет то, что будет выбрано при загрузке страницы.Это также упрощает отображение или скрытие любых других элементов на основе текущего выделения.

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 здесь .

Обновление

Я бы не рекомендовал это, поскольку это обратный способ работы, но если исходное значение вашей проверенной привязки имеет , поступающее из вводаСам элемент, вы можете создать небольшой обработчик привязки, который выполняется до привязки 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">

Это будет работать (доказательство ).Но правильным способом сделать это было бы получить данные в модели представления и, как это хорошо заметили в комментариях, вырезать среднего человека.