Categories


Archives


Recent Posts


Categories


Magento 2: Understanding the uiElement observe Method

astorm

Frustrated by Magento? Then you’ll love Commerce Bug, the must have debugging extension for anyone using Magento. Whether you’re just starting out or you’re a seasoned pro, Commerce Bug will save you and your team hours everyday. Grab a copy and start working with Magento instead of against it.

Updated for Magento 2! No Frills Magento Layout is the only Magento front end book you'll ever need. Get your copy today!

Every uiElement based object has an observe method. This method allows you to turn any value into a Knockout.js observable.

UiElement = requirejs('uiElement');
object = new UiElement;    

object.foo = 'bar';

object.observe('foo');

console.log(object.foo());

As you can see from the above, we’ve turned the foo property, formerly a string, into a an observable while maintaining its value. If you look at the source of the observe method

observe: function (useAccessors, properties) {
    var model = this,
        trackMethod;

    if (typeof useAccessors !== 'boolean') {
        properties   = useAccessors;
        useAccessors = false;
    }

    trackMethod = useAccessors ? accessor : observable;

    if (_.isString(properties)) {
        properties = properties.split(' ');
    }

    if (Array.isArray(properties)) {
        properties.forEach(function (key) {
            trackMethod(model, key, model[key]);
        });
    } else if (typeof properties === 'object') {
        _.each(properties, function (value, key) {
            trackMethod(model, key, value);
        });
    }

    return this;
},

You’ll see Magento has gotten a little (too?) clever with the arguments for this method. If the first parameter to observe is a boolean, and if that boolean is true, then Magento will observe the property not via an observable, but via the knockout-es5 plugin’s track method (discussed in the Observables, uiElement Objects, and Variable Tracking article.

object = new UiElement
object.baz = "Hello"
object.observe(true, 'baz');      
object.on('baz', function(value){
    console.log("called");
});        
object.baz = "Setting A new value"    

Magento also has an alias for this “boolean first” syntax – the track method.

//functionality equivalent
object.track('baz');          
object.observe(true, 'baz');     

If you’re a close follower of my writing, you’ll remember I previously warned you off track. That was an error on my part – track works perfectly fine, I had just forgotten that observables only fire their subscribers when a value changes

Finally, either track or observe will accept a list of properties as an array or a space separated string.

object.track('foo bar baz');          
object.observe(true, 'foo bar baz');  

object.track(['foo', 'bar', 'baz']);          
object.observe(true, 'foo', 'bar', 'baz');

Copyright © Alan Storm 1975 – 2019 All Rights Reserved

Originally Posted: 18th November 2016