使用基因剔除和MVVM时在哪里编写dom操纵代码 [英] where to write dom manipulation code when using knockout and MVVM part 2
问题描述
大家好,我问了一个问题昨天介绍了使用淘汰赛时在哪里编码dom操纵/动画等代码.我以前已将此代码编码到视图模型中,并被告知这是不正确的.
Hi guys i asked a question yesterday about where to code dom manipulation / animations etc when using knockout. I had previously coded this into the viewmodel and was advised this is not correct.
我现在已经按照建议更新了代码并创建了自定义绑定处理程序,但是我需要从自定义绑定处理程序中调用我的viewmodel方法.特别是动画完成时.我已经这样做了
Ive now updated my code and created custom binding handlers as advised, however i need to call a method of my viewmodel from within the custom binding handler. Specifically when the animation completes. Ive done it like this
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>
如您所见,即时消息传递了对viewmodel的引用以及我要设置动画的标签的ID.我只是想知道这是否是正确的方法.有没有更好的方法来引用视图模型,我是否正确调用了视图模型的方法,并且可以传入我想使用的html标签的ID吗?一切正常,但我渴望改进
As you can see im passing in a reference to the viewmodel and also the id of the tag i want to animate. Im just wondering if this is the correct way to do this. Is there a better way to reference the viewmodel, am i calling the method of the viewmodel correctly and is it ok to pass in the id of the html tag i want to use. It all works fine, but im keen to improve
此处是指向我的小提琴
推荐答案
您现在将绑定应用于包含员工的元素.我认为将SelectedEmployee
可观察的值应用于#PanelWrapper
会更好,因此您可以根据SelectedEmployee
的值来显示/隐藏它:
You're now applying the binding to the element containing the employee. I think it would be better to apply the SelectedEmployee
observable to the #PanelWrapper
so you can show/hide it depending on the value of 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
}
}
};
因此,现在您的员工行将如下所示:
So now your employee row will look like this:
<tr data-bind="click: $root.OnEmployeeClick">
和您的ViewModel
:
self.OnEmployeeClick = function(employee) { self.SelectedEmployee(employee); };
这篇关于使用基因剔除和MVVM时在哪里编写dom操纵代码的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!