使用knockout和MVVM时在哪里编写dom操作代码第2部分

大家好，我问了一个question https://stackoverflow.com/questions/17928558/where-to-write-dom-manipulation-code-when-using-knockout-and-mvvm昨天关于使用淘汰赛时在哪里编写 dom 操作/动画等代码。我之前已将其编码到视图模型中，但被告知这是不正确的。

我现在已经更新了我的代码并按照建议创建了自定义绑定处理程序，但是我需要从自定义绑定处理程序中调用我的视图模型的方法。特别是当动画完成时。我已经这样做了

ko.bindingHandlers.slideUp = {
    init:function(element, valueAccessor, allBindingsAccessor, context){
        var allBindings = allBindingsAccessor();
        var parent = allBindings.parent;

        $(element).click(function(){
            if(parent.SelectedEmployee() === valueAccessor())return;

            var $PanelWrapper = $('#' + allBindings.panelName); 
            var $Bottom = parseInt($PanelWrapper.css("bottom"));

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

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

我的绑定是

<tbody data-bind="foreach: Emps">
            <tr data-bind="slideUp: $data, parent: $parent, panelName: 'PanelWrapper'">
                <td data-bind="text: Name"></td>
            </tr>
        </tbody>

正如您所看到的，我传递了对视图模型的引用以及我想要设置动画的标签的 id。我只是想知道这是否是正确的方法。有没有更好的方法来引用视图模型，我是否正确调用视图模型的方法，是否可以传入我想要使用的html标签的id。一切都很好，但我渴望改进

这是我的链接fiddle http://jsfiddle.net/ricobano/DCP8T/12/

您现在将绑定应用到包含该员工的元素。我认为应用该方法会更好SelectedEmployee可以观察到#PanelWrapper所以你可以根据值显示/隐藏它SelectedEmployee:

<div id="PanelWrapper" data-bind="EmployeePanel: $root.SelectedEmployee"></div>

然后你的JS：

ko.bindingHandlers.EmployeePanel = {
    currentEmployee: null,
    init: function(element, valueAccessor) {
        var value = valueAccessor();
        this.setEmployee(element, ko.utils.unwrapObservable(value));
    },
    update: function(element, valueAccessor) {
        var value = valueAccessor();
        this.setEmployee(element, ko.utils.unwrapObservable(value));
    },
    setEmployee: function(element, value) {
        if (value === currentEmployee) return; // already selected employee
        this.currentEmployee = value;
        if (value) {
            $(element).fadeIn(); // show and populate the panel here
        } else {
            $(element).fadeOut(); // hide the panel here
        }
    }
};

所以现在你的员工行将如下所示：

<tr data-bind="click: $root.OnEmployeeClick">

和你的ViewModel:

self.OnEmployeeClick = function(employee) { self.SelectedEmployee(employee); };