How to implement a custom Knockout binding?

dmitry_fedyuk · June 14, 2017, 7:18am

df_i18n is my custom Knockout binding:

mage2pro/core/blob/2.7.11/Payment/view/frontend/web/template/card/new.html#L137-L137


			<span><!-- ko df_i18n: 'Card Verification Number'--><!-- /ko --></span>

1. JavaScript

github.com

mage2pro/core/blob/2.7.11/Translation/view/base/web/main.js#L43-L75


	/**
	 * 2017-06-14
	 * @param {Boolean} isUpdate
	 */
	function p(isUpdate) {return (
		/**
		 * 2017-06-14
		 * @param {HTMLElement} e
		 * @param {Function} fValue
		 */
		function(e, fValue) {
			// 2017-06-14 «8» means a comment node like <!-- ko df_i18n: 'Credit Card Number'-->
			/** @type {jQuery} HTMLElement */
			var $e = 8 !== e.nodeType ? $(e) : (isUpdate ? $(e).next('span') : $('<span/>').insertAfter(e));
			/** @type {String} */
			var original = ko.unwrap(fValue() || '');
			/** @type {String} */
			var translated = $.mage.__(original);
			if ((module.config() || {}).inlineTranslation) {
				$e.attr('data-translate', JSON.stringify([{
					'location': locations[$e.prop('tagName').toLowerCase()] || 'Text'
					,'original': original
					,'shown': translated
					,'translated': translated
				}]));
			}
			$e.text(translated);
		}
	);}
	/** @type {String} */
	var id = 'df_i18n';
	ko.bindingHandlers[id] = {init: p(false), update: p(true)};
	ko.virtualElements.allowedBindings[id] = true;

2. Layout

github.com

mage2pro/core/blob/2.7.11/Translation/view/base/layout/default.xml#L6-L6


	<body><referenceContainer name='root'><block class='Df\Translation\Js'/></referenceContainer></body>

3. Block

github.com

mage2pro/core/blob/2.7.11/Translation/Js.php#L5-L15


/** @final Unable to use the PHP «final» keyword here because of the M2 code generation. */
class Js extends AbstractBlock {
	/**
	 * 2017-06-14
	 * @override
	 * @see AbstractBlock::_toHtml()
	 * @used-by \Magento\Framework\View\Element\AbstractBlock::toHtml()
	 * @return string
	 */
	final protected function _toHtml() {return df_js(__CLASS__);}
}

dmitry_fedyuk · June 14, 2017, 8:27am