26

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/

4

2 に答える 2

36

spanテキストに追加を使用すると、1。バージョンを実現できます。

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

デモフィドル。

または、属性を設定するためにattrバインディングを使用する2.バージョン：idfor

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

デモフィドル

于 2012-12-01T15:21:37.110 に答える
4

Yoは、Knockoutsのコメントバインディング構文を使用して、余分なspan要素を削除するバインディングを取得することもできます。

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

これにより、狭いスペースで使用した場合に、チェックボックスとスパンが2行に分割されるのを防ぐことができます。

于 2015-06-09T06:34:12.107 に答える