где писать код манипуляции dom при использовании нокаута и MVVM part 3

Question

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

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

Предыдущее post Мне было предложено создать привязку на панели к наблюдаемой в моей модели viewmodel, а затем создать настраиваемую привязку, которая вызывается при изменении наблюдаемых изменений. Мой код ниже

ko.bindingHandlers.EmployeePanel = { 
    currentEmployee:null, 
    SelectEmployee:function(element, value){ 
     if(value === ko.bindingHandlers.EmployeePanel.currentEmployee){ 
      return; 
     } 

     ko.bindingHandlers.EmployeePanel.currentEmployee = value; 

     var $PanelWrapper = $(element); 
     var $Bottom = parseInt($PanelWrapper.css("bottom")); 

     if($Bottom === 0){ 
      $PanelWrapper.animate({ 
       bottom:"-95" 
      }, 500).animate({ 
       bottom:"0" 
      }, 500); 
     }else{ 
      $PanelWrapper.animate({ 
       bottom:"0px" 
      }, 500);  
     } 
    }, 

    update:function(element, valueAccessor){ 
     var value = ko.unwrap(valueAccessor()); 

     if(value == null){ 
      return; 
     } 

     ko.bindingHandlers.EmployeePanel.SelectEmployee(element, value); 
    } 
} 

и вот мое связывание

<div id="PanelWrapper" data-bind="EmployeePanel: Editable"> 
     <div id="Pagination"> 
      Prev | Next 
     </div> 
     <div data-bind="with: Editable" id="EmployeeDetails"> 
      <div > 
       <label>Name</label><input data-bind="value: Name" /> 
       <label>Position</label><input data-bind="value: Position" /> 
       <label>Age</label><input data-bind="value: Age" class="SmallTextField"/> 
       <label>Status</label><input data-bind="value: MaritalStatus" /> 
       <button data-bind="click: $parent.Accept">Save</button> 
       <button data-bind="click: $parent.Reject">Cancel</button>  
      </div> 
     </div> 
    </div> 

Теперь моя проблема заключается в том, что при загрузке страницы она automarically скользит вверх, даже когда наблюдаемая равна нуль. Чтобы справиться с этим, я поставил чек, но теперь панель не будет скользить вниз, когда наблюдаемое будет отменено. Как я могу справиться с этой ситуацией?

if(value == null){ 
      return; 
     } 

Вот ссылка на мой fiddle

Answer 1

Вы можете переместить код, чтобы скрыть панель, чтобы обновление до значения == NULL проверки, а затем просто дайте сделку метод SelectEmployee с отображением панели еще раз.

ko.bindingHandlers.EmployeePanel = { 
    currentEmployee:null, 
    SelectEmployee:function(element, value){ 
     if(value === ko.bindingHandlers.EmployeePanel.currentEmployee){ 
      return; 
     } 

     ko.bindingHandlers.EmployeePanel.currentEmployee = value; 

     var $PanelWrapper = $(element); 
     var $Bottom = parseInt($PanelWrapper.css("bottom")); 

     if($Bottom === 0){ 
      $PanelWrapper.animate({ 
       bottom:"0" 
      }, 500); 
     }else{ 
      $PanelWrapper.animate({ 
       bottom:"0px" 
      }, 500);  
     } 
    }, 

    update:function(element, valueAccessor){ 
     var value = ko.unwrap(valueAccessor()); 

     var $PanelWrapper = $(element); 
     $PanelWrapper.animate({ 
       bottom:"-95" 
     }, 500); 

     if(value == null) 
      return; 

     ko.bindingHandlers.EmployeePanel.SelectEmployee(element, value); 
    } 
}