1

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

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

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

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

这是我的小提琴的链接

4

1 回答 1

0

您可以移动代码以将面板隐藏到更新中，在 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);
    }
}
于 2013-07-30T13:17:28.667 回答