Generazione di ID all'interno di Knockout Cicli Foreach

Question

Sto provando a creare un codice HTML con Knockout che l'interfaccia utente di Jquery possa trasformare in toggle buttons. Che cosa ho bisogno per arrivare a questo è:

<div id="status"> 
    <input type="radio" id="status_ACTIVE" value="ACTIVE" name="status" /><label for="status_ACTIVE">Active</label> 
    <input type="radio" id="status_INACTIVE" value="INACTIVE" name="status" checked="checked" /><label for="status_INACTIVE">Inactive</label> 
</div> 

utilizzando jQuery UI posso facilmente trasformarla in pulsanti di commutazione. Ma come posso generarlo senza usare i modelli JQuery ora deprezzati? Questo è quello che ho cercato di fare:

all'interno del modello javascript:

self.statuses = [{Selected:true,Text:"Active",Value:"ACTIVE"},{Selected:false,Text:"Inactive",Value:"INACTIVE"}]; 

Il markup:

<div id="status" data-bind="foreach: statuses"> 
    <input type="radio" name="status" data-bind="value: Value, id: 'status_' + Value" /><label data-bind="text: Text, for: 'status_' + Value"></label> 
</div> 

Questo non funziona. Non penso che piaccia come sto cercando di creare quell'ID, o associarlo con il for in the loop. Disegna i pulsanti in modo errato, poiché due pulsanti indipendenti e la funzionalità di clic non funzionano.

Anche se si specifica solo il valore come id: id: Value e for: Value, non funziona ancora. Posso non impostare questi attributi usando knockout?

Answer 1

L'aggiunta di questo javascript risolto il mio problema:

ko.bindingHandlers.id = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
    }, 
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     $(element).attr('id', valueAccessor()); 
    } 
}; 

ko.bindingHandlers.forattr = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
    }, 
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     $(element).attr('for', valueAccessor()); 
    } 
}; 

ho dovuto cambiare for: 'status_' + Value in foratt: 'status_' + Value come for è una parola riservata.

Aggiornamento: avrei potuto anche usato il "attr" vincolante, in questo modo:

attr: { for: 'status_' + Value }