Is it possible to access $(this)
and perform actions such as hide()
or toggle()
this div
in Knockout? I'm trying to access it via jQuery. Any alternative methods within the function is appreciated.
At the moment if I do this:
click: function(){ console.log(this) }
I get the $data
of my viewmodel.
I know other ways of handling this action via the model of knockout but I was wondering if this is possible?
<div data-bind="click: function(){ $(this).hide() }" class="alert alert-secondary alert-dismissible fade show" role="alert" >
some text here
</div>
Is it possible to access $(this) and perform actions such as hide() or toggle() this div in Knockout?
Yes, but you should not do that.
Any jQuery code (beyond the $.ajax()
utility functions) and any other code that does DOM interaction (modification, traversal, event handling, style changes) should stay completely out of both your viewmodel and your view.
.hide()
in the viewmodel introduces a dependency to the view inside the viewmodel. Assume you change your view and .hide()
is no longer the right thing to do. Now you have to change the viewmodel as well - without adding any actual functionality. .hide()
in the view leaves the state inside the viewmodel in the dark about a change in how things are displayed. You lose control over how the viewmodel looks and are gradually forced to add even more hacks like this. So in your case, what you need is
visible
binding In the case of a dialog, let's call that property isVisible
and let it default to true
.
Viewmodel:
function Alert() {
var self = this;
self.isVisible = ko.observable(true);
self.message = ko.observable("some text here");
self.dismiss = function () { self.isVisible(false); };
}
View, wrapped for legibility:
<div
data-bind="
text: message,
click: dismiss,
visible: isVisible,
text: message
"
class="alert alert-secondary alert-dismissible fade show"
role="alert"
></div>
It's almost always better to handle logic on the view-model instead of cluttering your markup, however, you can access the element with "$element" instead of "this". For a better example of how things should be done refer to Tomalak's excellent answer.
data-bind="click: function(){ $($element).hide() }"
Maybe you can pass the event
and access event.target
and do event.target.hide()
on that. Usually this kind of situation is handled by assigning this
to some other variable
function sample(){
var _this = this;
function(){
console.log(_this,this); // both are accessible here
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.