Question

在淘汰赛应用程序中，我正在尝试处理forEach循环中的一些无线电输入。

click事件更新了选中的属性，但单选按钮的UI中未反映相同的内容。

下面的ID是整个Dropdown html：

    <ul class="dropdown-menu padding-left padding-right customscroll" data-bind="stoppropgattion:'ss'">

     <!--ko foreach:MyPlans-->
     <li>
        <div class="radio radio-adv">
        <label data-bind="attr:{for:$data.Id_$index}" for="cs_plan">
          <input class="access-hide" id="cs_plan" data-bind="value:$data.Selected,checked:$data.Selected,attr:{id:$data.Id_$index,name:true},click:UpdatedSelectedPlan" name="Plan" type="radio" />
          <span> <!--ko text:$data.Name--><!--/ko--><!--ko if:$data.IsDefault--><span> (Default)</span><!--/ko--></span><span class="circle"></span><span class="circle-check"></span>
        </label>
     </div>
   </li>
 <!--/ko-->
</ul>

在点击时，我还将更新所选的响应：

UpdatedSelectedPlan = function (data, event) {
            selF.MyPlans.filter(function (elem) {
                elem.Selected(false);
            });
            data.Selected(true);

        }

所选值已正确更新，但UI中未反映该值。

当“下拉列表”加载时，正确的单选显示为选中状态，但是单击时，即使所选值已更新，单击的单选也不会在UI上改变。

请指导

谢谢

Shruti Nair

Answer 1

添加了对方法返回true的方法，并且有效。

    UpdatedSelectedPlan = function (data, event) {
         selF.MyPlans.filter(function (elem) {
         elem.Selected(false);
    });
       data.Selected(true);
       return true;

   }

Answer 2

使用“更改”事件代替“点击”事件。单选框和复选框具有更改触发器。

    function vm(){
    var self = this;
    self.MyPlans = ko.observableArray([
      {Id:1, Name:'A', Selected:ko.observable(false), IsDefault:true}, 
      {Id:2, Name:'B', Selected:ko.observable(false), IsDefault:false}, 
      {Id:3, Name:'C', Selected:ko.observable(false), IsDefault:false}, 
      {Id:4, Name:'D', Selected:ko.observable(false), IsDefault:false}, 
      {Id:5, Name:'E', Selected:ko.observable(true), IsDefault:false}, 
    ]);
      self.UpdatedSelectedPlan = function (data, event) {
            self.MyPlans().filter(function (elem) {
                elem.Selected(false);
            });
            data.Selected(true);
        }
                 
     }
     
     ko.applyBindings(new vm())

    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <ul>
             <!--ko foreach:MyPlans-->
         <li>
            <div class="radio radio-adv">
            <label data-bind="attr:{for:$data.Id_$index}" for="cs_plan">
              <input class="access-hide" id="cs_plan" data-bind="checked:$data.Selected,value:$data.Selected,  attr:{id:$data.Id_$index,name:true},event:{change:$parent.UpdatedSelectedPlan}" name="Plan" type="radio" />
              <span> <!--ko text:$data.Name--><!--/ko--><!--ko if:$data.IsDefault--><span> (Default)</span><!--/ko--></span><span class="circle"></span><span class="circle-check"></span>
              selected ? <span data-bind="text:Selected"></span>
            </label>
         </div>
       </li>
     <!--/ko-->
    </ul>

UI中未删除淘汰单选按钮的状态

2 个答案: