使用敲除和 MVVM 时在哪里编写 dom 操作代码答案

【问题标题】：where to write dom manipulation code when using knockout and MVVM使用敲除和 MVVM 时在哪里编写 dom 操作代码
【发布时间】：2013-07-30 00:15:59
【问题描述】：

我开始思考淘汰赛，如果在视图模型中编写代码来操纵 dom 或触发动画等是否正确。例如，我有这个绑定，它传递对我想要滑动的 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 方法。任何帮助将不胜感激

【问题讨论】：

标签： knockout.js

【解决方案1】：

不，在视图模型中操作 dom 不是一个好主意。 MVVM 的整个概念是将 UI 的视图和数据/行为部分分开。

你应该使用custom binding handlers 或者你也可以在你的视图模型之外创建这些效果/控件（我不知道这到底是什么）。视图模型应该只对视图建模：数据和该数据上的命令。

【讨论】：

【解决方案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);
    }
};

希望对你有帮助。

【讨论】：