Question

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

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

在我的viewmodel中我有

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的视图和数据/行为部分。

您应该使用custom binding handlers，或者您也可以在viewmodel之外创建这些效果/控件（我不知道究竟是什么）。 viewmodel应该只对视图建模：数据和命令对该数据进行建模。

Answer 2

当您使用淘汰赛进行编码时，不应直接更改dom。

我建议使用slideBinding（需要jQuery）。

我制作了fiddle来演示如何使用它。这是一种主/细节视图。

观点：

<div data-bind="foreach : people">
    <div data-bind="click : $parent.onClick" style="cursor: pointer">
        <span data-bind="text : name"></span>
        <div data-bind="slideVisible: $parent.selected() == $data">
            <span data-bind="text : details"></span>
        </div>
    </div>
</div>

视图模型：

var vm = {
    selected: ko.observable(''),
    people : [{
        name: "name1",
        details: "details1"
    }, {
        name: "name2",
        details: "details2"
    }],
    onClick: function (item) {
        vm.selected(item);
    }
};

我希望它有所帮助。

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

2 个答案: