Magento 2 UI component and observable property with knockout-es5

If you are working with Magento2 and knockout js then you know what are observable property or array. Our example will be demonstrated  on very simple ui component how to create obseravble property with knockout-es5 plugin. Knockout-es5 is plugin for simplify syntax.

In first example we will create observable property total. You can do it on two ways. In first example we will create observable property total with plugin knockout-es5. About this plugin you can read more on http://blog.stevensanderson.com/2013/05/20/knockout-es5-a-plugin-to-simplify-your-syntax/

In example above we create observable property total. We are manipulating with value in method clickaction.

Very important is that you notice  defaults settings which contains initial value for property total = 100, and tracks property. Tracks property contains names of property which will be used for initializing observable properties.

In method clickaction you can see that we are assigning new value to property total but we don’t need to invoke this property as functions.

 

Second example will demonstrate how to create observable property without knockout-es5 plugin.

You can see that we have to invoke this.total  function with brackets  in clickaction property.

You may also like...

Leave a Reply