How Form Event Bindings work in KnockoutJs
This content is basically a translation of the original materials. The intention is to learn about KnockoutJs for Magento 2 and create content in Portuguese about KnockouJs.
Documentation
- The data-bind syntax
- Binding context
- The "click" binding
- The "event" binding
- The "submit" binding
- The "enable" and "disable" bindings
- The "value" binding
- The "textInput" binding
- The "hasFocus" binding
- The "checked" binding
- The "options" binding
- The "selectedOptions" binding
- The "uniqueName" binding
Bindings
In KnockoutJs, bindings are the way to connect the logic of the ViewModel (the data and business logic) with the View (HTML). In short, it is through bindings that the user interface automatically reflects changes in your data, without the need to directly manipulate the DOM.
Bindings in KnockoutJs work through the data-bind attribute on HTML elements. This attribute is where you specify the binding you want to use and the associated values.
Form Events
Click
The binding click adds an event handler so that the chosen JavaScript function is invoked when the associated DOM element is clicked. This is most commonly used on elements tagged
Each time the element is clicked, this will invoke the method that was passed in the ViewModel, which in turn changes the state of the ViewModel, which causes the UI to be updated.
<div>
You've clicked <span data-bind="text: numberOfClicks"></span> times
<button data-bind="click: incrementClickCounter">Click me</button>
</div>
<script type="text/javascript">
ko.applyBindings({
numberOfClicks : ko.observable(0),
incrementClickCounter : function() {
var previousCount = this.numberOfClicks();
this.numberOfClicks(previousCount + 1);
}
});
</script>
By default, KnockoutJs will prevent the click event from performing any standard actions. This means that when using binding click on an tag, the browser will just call the function and not navigate to the href of the link. Click-to-click binding is typically used when you are using the link as part of a UI that manipulates the ViewModel, not as a normal hyperlink to another web page. If it is necessary for the standard click action to continue, simply return true in the function.
Event
The binding event allows you to add an event handler for a specified event so that your chosen JavaScript function is invoked when that event is fired for the associated DOM element. This can be used to bind to any event such as key press, mouse hover or mouse exit.
<div>
You've clicked <span data-bind="text: numberOfClicks"></span> times
<button data-bind="click: incrementClickCounter">Click me</button>
</div>
<script type="text/javascript">
ko.applyBindings({
numberOfClicks : ko.observable(0),
incrementClickCounter : function() {
var previousCount = this.numberOfClicks();
this.numberOfClicks(previousCount + 1);
}
});
</script>
Submit
The binding submit *is a submit binding directive on a form will prevent the browser's default submit action for that form, in other words the browser will call the handler function, but it will not send the form to the server. The *submit binding is typically used when the form is being used as an interface to the ViewModel, not as a normal HTML form. If the form needs to be submitted as a normal HTML form, simply return true from your submission handler.
<div>
<div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }">
Mouse over me
</div>
<div data-bind="visible: detailsEnabled">
Details
</div>
</div>
<script type="text/javascript">
ko.applyBindings({
detailsEnabled: ko.observable(false),
enableDetails: function() {
this.detailsEnabled(true);
},
disableDetails: function() {
this.detailsEnabled(false);
}
});
</script>
Enable/Disable
binding enable causes the associated DOM element to be enabled when its parameter value is true. binding disable works in the opposite way, causing the associated DOM element to be disabled when its value is true.
<form data-bind="submit: doSomething">
<button type="submit">Submit</button>
</form>
<script type="text/javascript">
ko.applyBindings({
this.doSomething = function(formElement) {
// ... now do something
}
});
</script>
Value
The binding value *binds the value of the DOM element associated with a property in the *ViewModel. This is typically useful with form elements like ,