Knockout.JS 标签在 foreach 中不起作用
Knockout.JS labels not working inside foreach
我过去使用过 HTML5 标签 'for' 属性,效果很好,您可以单击它,它会将焦点更改为相关的表单项。但是,在这种情况下,每个项目的名称部分由其索引确定,标签似乎不响应点击。
HTML
<div data-bind='foreach: people'>
<div class="personWell">
<label data-bind="attr: {'for':'personsObserved['+ $index()+'][name]'}" class="content-label">Name</label>
<input type="text" data-bind="attr: {'name':'personsObserved['+ $index()+'][name]'}, value: name" required placeholder="Person Name"></input>
<label data-bind="attr: {'for':'personsObserved['+ $index()+'][company]'}" class="content-label">Company</label>
<input type="text" data-bind="attr: {'name':'personsObserved['+ $index()+'][company]'}, value: company" required placeholder="Company Name"></input>
<button type="button" class="btn btn-xs btn-warning" data-bind='visible: $root.people().length > 1, click: $root.removePerson'>Delete</button>
</div>
</div>
输出源
<label data-bind="attr: {'for':'personsObserved['+ $index()+'][name]'}" class="content-label" for="personsObserved[0][name]">Name</label>
<input type="text" data-bind="attr: {'name':'personsObserved['+ $index()+'][name]'}, value: name" required="" placeholder="Person Name" name="personsObserved[0][name]">
如您所见,'for' 和 'name' 属性匹配。但是点击标签什么也没做。
for 属性必须在 HTML 5 中指定 ID...它完全不能与 name 属性一起使用。
我过去使用过 HTML5 标签 'for' 属性,效果很好,您可以单击它,它会将焦点更改为相关的表单项。但是,在这种情况下,每个项目的名称部分由其索引确定,标签似乎不响应点击。
HTML
<div data-bind='foreach: people'>
<div class="personWell">
<label data-bind="attr: {'for':'personsObserved['+ $index()+'][name]'}" class="content-label">Name</label>
<input type="text" data-bind="attr: {'name':'personsObserved['+ $index()+'][name]'}, value: name" required placeholder="Person Name"></input>
<label data-bind="attr: {'for':'personsObserved['+ $index()+'][company]'}" class="content-label">Company</label>
<input type="text" data-bind="attr: {'name':'personsObserved['+ $index()+'][company]'}, value: company" required placeholder="Company Name"></input>
<button type="button" class="btn btn-xs btn-warning" data-bind='visible: $root.people().length > 1, click: $root.removePerson'>Delete</button>
</div>
</div>
输出源
<label data-bind="attr: {'for':'personsObserved['+ $index()+'][name]'}" class="content-label" for="personsObserved[0][name]">Name</label>
<input type="text" data-bind="attr: {'name':'personsObserved['+ $index()+'][name]'}, value: name" required="" placeholder="Person Name" name="personsObserved[0][name]">
如您所见,'for' 和 'name' 属性匹配。但是点击标签什么也没做。
for 属性必须在 HTML 5 中指定 ID...它完全不能与 name 属性一起使用。