5

im starting to get my head around knockout and if its correct to write code in the viewmodel that manipulates the dom or fires animations etc. As an example i have this binding that passes in a reference to a div which i want to slide out when the tr is clicked

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

In my viewmodel i have

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

Im wondering if this is valid and that it follows the vmmv methodology. Any help would be appreciated

4

2 回答 2

8

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

您应该使用自定义绑定处理程序，或者您也可以在视图模型之外创建这些效果/控件（我不知道这到底是什么）。视图模型应该只对视图建模：数据和该数据上的命令。

于 2013-07-29T16:06:29.183 回答
2

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

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

我做了一个小提琴来演示如何使用它。这是一种主/细节视图。

风景 ：

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

我希望它有所帮助。

于 2013-07-29T16:15:59.513 回答