使用淘汰赛和 MVVM 第 3 部分时在哪里编写 dom 操作代码答案

【问题标题】：where to write dom manipulation code when using knockout and MVVM part 3使用淘汰赛和 MVVM 第 3 部分时在哪里编写 dom 操作代码
【发布时间】：2013-07-30 14:59:58
【问题描述】：

我一直在玩淘汰赛，在这里的人们和文档的帮助下，我有一些方法可以实现我所需要的，但是我仍然有一个问题，我不知道如何解决它。

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

在之前的post 上，有人建议我在面板上创建一个绑定到我的视图模型中的可观察对象，然后创建一个自定义绑定，当可观察对象更改时调用该绑定。我的代码在下面

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>

现在我的问题是，当页面加载时，即使 observable 为空，它也会自动向上滑动。为了解决这个问题，我进行了检查，但是现在当 observable 为空时面板不会向下滑动。我该如何处理这种情况？

if(value == null){
            return;
        }

这里是我的fiddle的链接

【问题讨论】：

标签： knockout.js

【解决方案1】：

您可以移动代码以将面板隐藏到更新中，在 value == 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);
    }
}

【讨论】：