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

Question

即时通讯开始让我的头围绕淘汰赛,如果它正确在viewmodel中编写操作dom或激发动画等的代码.作为一个例子,我有这个绑定传递给我想要滑出的div的一个div单击tr

<tr data-bind="click: function(data, event){$parent.Select('#PanelWrapper', $data)}">

在我的视图模型中,我有

self.Select = function (panel, e) {
        console.log(ko.toJS(e));
        if(self.SelectedEmployee() === e)return;

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

        if($Bottom === 0){
            self.$PanelWrapper.animate({
                bottom:"-95"
            }, 500, function(){
                self.SelectedEmployee(e);
                self.Editable(new Employee(ko.toJS(e)));
            }).animate({
                bottom:"0"
            }, 500);
        }else{
            self.SelectedEmployee(e);
            self.Editable(new Employee(ko.toJS(e)));

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

我想知道这是否有效,并且它遵循vmmv方法.任何帮助,将不胜感激

Answer 1

不,在viewmodel中操作dom不是一个好主意.MVVM的整个概念是分离UI的视图和数据/行为部分.

您应该使用自定义绑定处理程序,或者您也可以在viewmodel之外创建这些效果/控件(我不知道究竟是什么).viewmodel应该只对视图建模:数据和命令对该数据.