nhãn Checkbox và Radio trong loại trực tiếp

Question

Trong html, khi chúng ta click vào văn bản hoặc di chuột qua văn bản của một nút radio hoặc hộp kiểm, chúng tôi có thể chọn nó với html như hình dưới đây:

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

HOẶC

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

tôi đang cố gắng để có được những hành vi tương tự với loại trực tiếp, nhưng không thể tìm thấy sự giúp đỡ nhiều vào giống nhau:

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

The View (hoặc html) là dưới đây (Lưu ý mã dưới đây không chứa html ở trên, vì vậy khi bạn thử nó, bạn sẽ cần phải thực hiện những thay đổi trên và kiểm tra xem nó):

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

Dưới đây là quan điểm mô hình:

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

Dưới đây là liên kết jsFiddle: http://jsfiddle.net/rupesh_kokal/AFzbY/

Answer 1

Bạn có thể đạt được các phiên bản 1. với việc sử dụng thêm span cho các văn bản:

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

Demo fiddle.

Hoặc 2. phiên bản với việc sử dụng attr binding để thiết lập id và for thuộc tính:

<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 thậm chí có thể nhận được các ràng buộc để thả span thêm -kết thúc, bằng cách sử dụng cú pháp ràng buộc nhận xét Knockouts:

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

Điều này sẽ ngăn hộp kiểm và khoảng cách chia nhỏ trên hai dòng, nếu được sử dụng trong không gian hẹp.