Question

我有我正在显示的广播项目列表

<!-- ko if: $data.children -->
<li data-bind="attr: { id: id}" class="has-children">
    <label>
        <input type="radio" name="massType" data-bind="value: id, checked: $root.massTypeSelectionForOrderList"/>
        <span class="text" data-bind="text:name"> </span>
    </label>
    <ul class="child" data-bind="template: { name: 'treeLarge1', foreach: children }"></ul>
</li>
<!-- /ko -->

<!-- ko ifnot: $data.children -->
<li data-bind="attr: { id: id}">
    <label>
        <input type="radio" name="massType" data-bind="value: id, checked: $root.massTypeSelectionForOrderList">
        <span class="text" data-bind="text:name"> </span>
    </label>
</li>
<!-- /ko -->

问题是我必须单击两次单选按钮/标签才能选择单选按钮。我试过删除值绑定但它不起作用。

有什么想法吗？

Answer 1

问题不在于您在此处发布的代码。我根据您的代码整理了这个代码段，单选按钮的行为符合预期。您可以使用此代码段作为尝试复制问题的起点。

vm = {
  id: '1',
  massTypeSelectionForOrderList: ko.observable(false),
  name: 'One',
  children: [{
    id: '2',
    massTypeSelectionForOrderList: ko.observable(false),
    name: 'Two'
  }]
};

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<template id='treeLarge1'>
  <!-- ko if: $data.children -->
  <li data-bind="attr: { id: id}" class="has-children">
    <label>
      <input type="radio" name="massType" data-bind="value: id, checked: $root.massTypeSelectionForOrderList" />
      <span class="text" data-bind="text:name"> </span>
    </label>
    <ul class="child" data-bind="template: { name: 'treeLarge1', foreach: children }"></ul>
  </li>
  <!-- /ko -->

  <!-- ko ifnot: $data.children -->
  <li data-bind="attr: { id: id}">
    <label>
      <input type="radio" name="massType" data-bind="value: id, checked: $root.massTypeSelectionForOrderList">
      <span class="text" data-bind="text:name"> </span>
    </label>
  </li>
  <!-- /ko -->
</template>
<ul data-bind="template: 'treeLarge1'"></ul>

单击标签两次的单选按钮Knockout

1 个答案: