Etiketleme Seçim ve Radyo

Question

html, biz metnin tıklayabilir veya bir radyo düğmesi veya onay kutusunun metnin üzerine getirdiğinizde, biz html ile seçmek edebiliyoruz aşağıda gösterildiği gibi:

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

YA

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

Ben nakavt ile aynı davranışı almaya çalışırken, ama am aynı üzerinde çok yardım bulamayan:

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

View (veya html) (yukarıdaki html içermiyor aşağıdaki kodu Not yüzden onu çalıştığınızda yukarıdaki değişiklikler yapmanız gerekir ve bunu kontrol edecektir) aşağıda verilmiştir: Burada

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

görünümüdür modeli: http://jsfiddle.net/rupesh_kokal/AFzbY/

Answer 1

metnin için span ekstra kullanarak 1. versiyonunu elde edebilirsiniz:

İşte

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

jsFiddle link

Demo fiddle.

Ya id ve for niteliğini belirlemek için attr binding kullanarak 2. sürümü:

<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 bile ekstra yayılma düşmesi bağlayıcı alabilirsiniz - Knockouts yorum-bağlama sözdizimini kullanarak, -element:

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

Bu, dar alanlarda kullanıldığında onay kutusunun ve açıklığın iki satırdan ayrılmasını engeller.