How to handle a click event for a Knockout template's element with the «click» binding?

dmitry_fedyuk · August 9, 2016, 5:49pm

Example 1: the simpliest case

magento/magento2/blob/2.1.0/app/code/Magento/Ui/view/base/web/templates/form/element/button.html#L7-L17


<button type="button"
    css="
        'action-advanced': $data.displayAsLink,
        'action-secondary': !$data.displayAsLink
    "
    click="action"
    disable="disabled"
    attr="'data-index': index">
<span text="title">
</span>
</button>

github.com

magento/magento2/blob/2.1.0/app/code/Magento/Ui/view/base/web/js/form/components/button.js#L46-L51


/**
 * Performs configured actions
 */
action: function () {
    this.actions.forEach(this.applyAction, this);
},

Example 2: calling the parent view’s method with parameters

github.com

magento/magento2/blob/2.1.0/app/code/Magento/Catalog/view/adminhtml/web/template/image-preview.html#L19-L28


<div class="actions">
    <button
        type="button"
        class="action-remove"
        data-role="delete-button"
        attr="title: $t('Delete image')"
        click="$parent.removeFile.bind($parent, $file)">
        <span translate="'Delete image'"/>
    </button>
</div>

github.com

magento/magento2/blob/2.1.0/app/code/Magento/Ui/view/base/web/js/form/element/file-uploader.js#L140-L150


/**
 * Removes provided file from thes files list.
 *
 * @param {Object} file
 * @returns {FileUploader} Chainable.
 */
removeFile: function (file) {
    this.value.remove(file);


    return this;
},

http://knockoutjs.com/documentation/click-binding.html