Knockout.js 使用knockout和MVVM第3部分时在何处编写dom操作代码

我一直在玩淘汰赛，在这里的人和医生的帮助下，我已经找到了一些方法来实现我所需要的，但是我仍然有一个问题，我不知道如何解决它

基本上，当用户单击员工列表时，我会尝试向上滑动面板。该面板具有更多详细信息，用户可以编辑并保存或拒绝

在上一次会议上，有人建议我在面板上创建一个绑定，绑定到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>

---

这里有一个指向my

的链接，您可以在值==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);
    }
}

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);
    }
}