Etichettatura casella di controllo e Radio in knockout

Question

in HTML, quando si clicca sul testo o soffermarsi sul testo di un pulsante di scelta o di casella di controllo, siamo in grado di selezionare con il codice HTML come illustrato di seguito:

<label> 
<input type="checkbox" />option 1 
</label> 

O

<input id="checkboxid" type="checkbox" /> 
<label for="checkboxid">option 1</label> 

io sto cercando di ottenere lo stesso comportamento con eliminazione diretta, ma incapace di trovare molto aiuto sulla stessa:

<label data-bind="text: $data.optiontext"> 
    <input type="checkbox" data-bind="value: $data.optionvalue, checked: $parent.selectedOptions" /> 
</label> 

The View (o html) è al di sotto (Si noti il ​​codice qui sotto non contiene quanto sopra html, in modo che quando si prova è necessario apportare le modifiche di cui sopra e controllare):

<div data-bind="foreach: options"> 
    <input type="checkbox" data-bind="value: $data.optionvalue, checked: $parent.selectedOptions" /> 
    <label data-bind="text: $data.optiontext"></label> 
</div> 

<hr /> 

<div data-bind="text: selectedOptionsList"></div>​ 

Qui è la vista modello:

var viewModel = { 
    options: [ 
       { optiontext: 'Simple', optionvalue: "1" }, 
       { optiontext: 'Advanced', optionvalue: "2" } 
      ], 
    selectedOptions: ko.observableArray(["2"]) 
}; 

viewModel.selectedOptionsList = ko.computed(function() { 
    return this.selectedOptions().join(","); 
}, viewModel); 

ko.applyBindings(viewModel); 

Ecco il link jsFiddle: http://jsfiddle.net/rupesh_kokal/AFzbY/

Answer 1

è possibile ottenere la versione 1. con l'utilizzo di un extra span per il testo:

<label> 
    <input type="checkbox" data-bind="value: $data.optionvalue, 
      checked: $parent.selectedOptions" /> 
    <span data-bind="text: $data.optiontext"/> 
</label> 

Demo fiddle.

o la versione 2. con l'utilizzo del attr binding per impostare la id e l'attributo for:

<input type="checkbox" data-bind="value: $data.optionvalue, 
     checked: $parent.selectedOptions, attr: { id: optiontext}" />  
<label data-bind="text: $data.optiontext, attr: {for: optiontext}" /> 

Demo fiddle

Answer 2

Yo può anche ottenere il legame di abbandonare l'arco in più -elemento, usando la sintassi di binding-binding di Knockouts:

<label> 
<input type="checkbox" data-bind="value: $data.optionvalue, 
     checked: $parent.selectedOptions" /> 
<!-- ko text: $data.optiontext --><!-- /ko --></label> 

In questo modo si evita che la casella di controllo e lo span si spezzino su due righe, se utilizzati in spazi ristretti.