Маркировка и радио в нокауте

В html, когда мы нажимаем на текст или наводим указатель на текст переключателя или флажка, мы можем выбрать его с помощью html, как показано ниже:

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

ИЛИ

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

Я пытаюсь получить такое же поведение с нокаутом, но не могу найти много помощи на том же самом:

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

Ниже показан вид (или html) (обратите внимание, что приведенный ниже код не содержит вышеуказанный html, поэтому при его попытке вам необходимо выполнить указанные выше изменения и проверить его):

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

Вот модель представления:

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: http://jsfiddle.net/rupesh_kokal/AFzbY/

Ответ 1

Вы можете достичь 1. версии с использованием дополнительного span для текста:

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

Демо-скрипт.

Или 2. версия с использованием привязки attr для установки атрибута id и for:

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

Демо-скрипт

Ответ 2

Yo может даже получить привязку, чтобы удалить дополнительный элемент span, используя синтаксис комментария комментариев Knockouts:

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

Это предотвратит разбиение флажка и диапазона на две строки, если они используются в узких пространствах.