Generando ID dentro de Knockout Foreach loops

Question

Estoy intentando construir algo de HTML con Knockout que Jquery UI puede convertir en toggle buttons. Lo que necesito para llegar a esto es:

<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> 

usando jQuery UI puedo convertir fácilmente que en botones de conmutación. Pero, ¿cómo puedo generar eso sin utilizar las plantillas de JQuery ahora depreciadas? Esto es lo que he tratado de hacer:

Dentro del modelo de javascript:

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

El marcado:

<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> 

Esto no funciona. No creo que le guste la forma en que estoy tratando de crear esa ID, ni la asocie con la de for the loop. Dibuja los botones incorrectamente, ya que dos botones independientes y la funcionalidad de clic no funcionan.

Incluso si solo especifico el valor como id: id: Value y for: Value, aún no funciona. ¿No puedo establecer estos atributos usando knockout?

Answer 1

La adición de este javascript resuelto mi 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()); 
    } 
}; 

que tenía que cambiar for: 'status_' + Value en foratt: 'status_' + Value como for es una palabra reservada.

Actualización: que también podría haber utilizado el "attr" vinculante, así:

attr: { for: 'status_' + Value }