Флажок одиночного выбора

Question

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

<div class="consulting-editors" data-bind="foreach: ConsultingEditors">
    <input type="checkbox" name="Promote" data-bind="checked: Promote, click: $parent.promoterSelectedOnclick" /> Display as main editor 
</div>

ConsultingEditors: KnockoutObservableArray<NavigatorAuthorApi> = ko.observableArray();  

promoterSelectedOnclick = (selectedEditor: NavigatorAuthorApi) => {

    if (this.ConsultingEditors().some(e => e.Promote)) {
        this.ConsultingEditors().filter(e => e.AuthorRef != selectedEditor.AuthorRef).forEach((e) => {
            e.Promote = false;
        });
    }

    return this.ConsultingEditors();
}

export type NavigatorAuthorApi =
    {
        SortOrder: number,
        FirmRef: number,
        FirmName: string,
        AuthorRef: number,
        AuthorName: string,
        DisplayString: string,
        EditorImage: ByteString[],
        Promote: boolean
    }   

Answer 1

Две вещи,

1. Вам нужна функция щелчка, чтобы вернуть true, иначе привязка клика будет конфликтовать с проверенной привязкой.

2. Promote используется как логическое значение, но пользовательский интерфейс должен реагировать на любые изменения его значения. Все, на что должен реагировать пользовательский интерфейс, должно быть нокаутируемым.

function viewModel(){
    var self=this;

    self.ConsultingEditors = ko.observableArray([
    	new NavigatorAuthorApi(false, 1),
      new NavigatorAuthorApi(false, 2),
      new NavigatorAuthorApi(false, 3)
    ]);

    self.promoterSelectedOnclick = function(selectedEditor){
        if (self.ConsultingEditors().some(e => e.Promote())) {
            var others = self.ConsultingEditors().filter(e => e.AuthorRef != selectedEditor.AuthorRef);
            others.forEach((e) => {
                e.Promote(false);
            });
        }
        return true;
    }
}

function NavigatorAuthorApi(promote, authorRef)
{
		var self = this;
  	self.SortOrder = null;
    self.FirmRef = null;
    self.FirmName = null;
    self.AuthorRef = authorRef;
    self.AuthorName = null;
    self.DisplayString = null;
    self.EditorImage = null;
    self.Promote = ko.observable(promote);
}   
    
ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div class="consulting-editors" data-bind="foreach: ConsultingEditors">
    <input type="checkbox" name="Promote" data-bind="checked: Promote, click: $parent.promoterSelectedOnclick" /> Display as main editor 
</div>

Answer 2

Promote должно быть observable, если вы хотите, чтобы изменение свойства отражалось на DOM.

class viewModel {

  ConsultingEditors = ko.observableArray([
    { Promote: ko.observable(false), AuthorRef: 1},
    { Promote: ko.observable(false), AuthorRef: 2 },
    { Promote: ko.observable(false), AuthorRef: 3 }
  ]);

  promoterSelectedOnclick = (selectedEditor) => {
    this.ConsultingEditors().filter(e => e.AuthorRef != selectedEditor.AuthorRef).forEach((e) => {
      e.Promote(false);
    });
    return true;
  }
}

ko.applyBindings(new viewModel())

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div class="consulting-editors" data-bind="foreach: ConsultingEditors">
  <input type="checkbox" name="Promote" data-bind="checked: Promote, click: $parent.promoterSelectedOnclick" /> Display
</div>