我如何使一個複選框的標籤在knockout js中可點擊？

Question

我們如何使文本可點擊。下面是一個被稱爲淘汰賽模板的列表。我可以直接選中該框，但無法使文本可點擊以便反映該複選框。
HTML：

<ul data-bind="template: { name: 'choiceTmpl', foreach: choices, templateOptions: { selections: selectedChoices } }"></ul> 

    <script id="choiceTmpl" type="text/html"> 
     <li> 
      <input type="checkbox" data-bind="attr: { value: $data }, checked: $item.selections" /> 
      <label data-bind="text: $data"></label> 
     </li> 
    </script> 

JS：

var viewModel = { 
    choices: ["one", "two", "three", "four", "five"], 
    selectedChoices: ko.observableArray(["two", "four"]) 
}; 

viewModel.selectedChoicesDelimited = ko.dependentObservable(function() { 
    return this.selectedChoices().join(","); 
}, viewModel); 

ko.applyBindings(viewModel); 

的jsfiddle演示：here

有什麼辦法，我們可以把它點擊？

Answer 1

放一個<label>的<input>元素周圍：

var viewModel = { 
 
    choices: ["one", "two", "three", "four", "five"], 
 
    selectedChoices: ko.observableArray(["two", "four"]) 
 
}; 
 

 
viewModel.selectedChoicesDelimited = ko.dependentObservable(function() { 
 
    return this.selectedChoices().join(","); 
 
}, viewModel); 
 

 
ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<ul data-bind="foreach: choices"> 
 
    <li> 
 
    <label> 
 
     <input data-bind="attr: { 
 
          value: $data 
 
         }, 
 
         checked: $parent.selectedChoices" type="checkbox" /> 
 
     
 
     <span data-bind="text: $data"></span> 
 
    </label> 
 
    </li> 
 
</ul> 
 

 
<pre data-bind="html: JSON.stringify(selectedChoices(), null, 2)"></pre>

在你的提琴：http://jsfiddle.net/x0f1pk6q/

或者，你可以構建循環的id屬性。你必須確保它是唯一的，雖然。我建議你使用某種實用程序，在閉包中增加一個索引，並保證每個會話都是唯一的。

你需要用同樣的方法來鏈接id和for屬性：

var viewModel = { 
 
    choices: ["one", "two", "three", "four", "five"], 
 
    selectedChoices: ko.observableArray(["two", "four"]), 
 
    getCbId: function(val, i) { 
 
    // This combination of value and index aims to create a 
 
    // "kind-of-unique" id. See answer for more info. 
 
    return "CB_" + val + "_" + i; 
 
    } 
 
}; 
 

 
viewModel.selectedChoicesDelimited = ko.dependentObservable(function() { 
 
    return this.selectedChoices().join(","); 
 
}, viewModel); 
 

 
ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<ul data-bind="foreach: choices"> 
 
    <li> 
 
    
 
    <input data-bind="attr: { 
 
         value: $data, 
 
         id: $root.getCbId($data, $index()) 
 
         }, 
 
         checked: $root.selectedChoices" type="checkbox" /> 
 
    
 
    <label data-bind="text: $data, 
 
         attr: { 
 
         for: $root.getCbId($data, $index()) 
 
         }"></label> 
 
    
 
    </li> 
 
</ul> 
 

 
<pre data-bind="html: JSON.stringify(selectedChoices(), null, 2)"></pre>