Ui element and knockout js array subscriber/listener

Question

I would like to do 2 thinks with knockout js and UI component

1. Fill in input in a grid based on entity_id - Works great
2. Trigger callback when one of input has changed

The second part works partly. When I am using collectionDates as string then all of the input will get same value and when one of the input are changed then valueChanged method is called.

When collectionDates is set as an array (so that every input can have it's own value) then the callback wont trigger when any of inputs value change. Reading knockout js documentation for observable arrays I believe this should be possible. Why magento 2 UI component does not track changes of array elements?

define([
 'jquery',
 'Magento_Ui/js/grid/columns/column'
], function (,ドル Column) {
 'use strict';
 return Column.extend({
 defaults: {
 collectionDates: {
 19: 100,
 21: 200
 },
 listens:{
 collectionDates: 'valueChanged'
 }
 },
 initObservable: function () {
 return this._super()
 .track(['collectionDates']);
 },
 valueChanged: function (val, val2, val3) {
 debugger
 }
 });
});

Template used for input

<input
 type="text"
 data-bind="value: collectionDates[$row().entity_id]"
/>

• Pisikoll: So far I have found that I could use event: {change: valueChanged} in data-bind. Still this does not feel right. I am staring to wonder if this is some kind of a bug?

Answer 1

I researched this topic for 2 day and found that it isn't that simple. This could be done but needs custom bindings. Something similar to staticChecked binding found in multi select column component (ui/grid/cells/multiselect).

Binding itself is located here

C:\Users\Pisikoll\Documents\drive-innMagento\vendor\magento\module-ui\view\base\web\js\lib\knockout\bindings\staticChecked.js

For now without writing complicated code events are the way to go.