переключатель проверен, нокаутированный статус не обновляется в пользовательском интерфейсе - PullRequest
Новая
       12

переключатель проверен, нокаутированный статус не обновляется в пользовательском интерфейсе

0 голосов
/ 14 января 2019

В моем приложении нокаута я пытаюсь обработать несколько радиовходов в цикле forEach.

Событие click обновило отмеченные свойства, но оно не отражается в интерфейсе переключателя.

Ниже ID находится весь раскрывающийся 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);

        }

Выбранное значение обновляется правильно, но это не отражается в пользовательском интерфейсе.

Когда выпадающий список загружается, правильное радио показывается как выбранное, но при щелчке радио, по которому щелкнули, пользовательский интерфейс не меняется, даже если выбранное значение обновляется.

Пожалуйста, руководство

Спасибо

Шрути Наир

Ответы [ 2 ]

0 голосов
/ 14 января 2019

использовать событие «изменить» вместо «щелкнуть». Радио и флажок имеют триггер изменения. 

    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>
0 голосов
/ 14 января 2019

Добавлен возврат true в метод, и он работает. 

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

   }
...