How to extend js class/method of checkout model class in magento 2

Question

Basically I need to some method overwrite/extend of following Js class.

magento/module-checkout/view/frontend/web/js/model/step-navigator.js

Overwrite of this class through requirejs working fine. But I need to extend one of method of this class. here is an example of overwrite requirejs-config.js

var config = {
 "map": {
 "*": {
 "Magento_Checkout/js/model/step-navigator": "SR_Checkout/js/model/step-navigator"
 }
 }
};

How to extend some method of any model class in checkout.

Answer 1

You need create requirejs-config.js in you module with

var config = {
 config: {
 mixins: {
 'Magento_Checkout/js/model/step-navigator': {
 'You_Module/js/step-navigator/pluggin': true
 }
 }
 }
};

And js/step-navigator/pluggin.js file with content like

define(function () {
 'use strict';
 return function (target) { // target == Result that 'Magento_Checkout/js/model/step-navigator' returns.
 // modify target
 var navigateTo = target.navigateTo;
 target.navigateTo = function(code, scrollToElementId) {
 if (code == ...) { // before method
 ....
 }
 var result = navigateTo.apply(this, arguments);
 //after method call
 return result;
 };
 return target.
 };
});

• Eugen Bogdanovich: thanks Kandy, this is so cool, don't have an idea why it's still not in M2 docs
• Chirag Prajapati: this method is call before right! can you tell me how to call after of parent method?
• MackieeE: This is almost 2 years old now, just a FYI for anyone who comes across this in the future: Magento Mixin Docs Link

Answer 2

This still works in 2.2.7. Thank you very much KAndy. You can also add veriables if you want to change it like this:

var result = navigateTo.apply(this, [code, scrollToElementId]);
 //after method call