2 Replies Latest reply on Oct 11, 2019 4:41 PM by 3137215

    UI not updated when KO observable array is updated

    3137215

      We have dialog in which we are using the 'oj-select-many' component with 'oj-bind-for-each' for listing the options using a KO observable array. On click of a button, I need to clear the existing entries of the observable array and add new entries to it. I have added the method, where i am calling the KO 'removeAll' method on the observable array and then pushing the new entries in to the array and refreshing the 'oj-select-many' component so that the change gets reflected in the UI. But what i see is, the newly added entries are visible in the options in the UI, but the previous entries are not getting cleared (which i tried achieving by calling KO 'removeAll'). We are using JET 5.0.

       

      The UI code with oj-select-many and 'oj-bind-for-each':

      <oj-select-many id="filterSources" on-value-changed="[[sourceFilesChange]]" :title="[[sourcesTitle]]"  value="{{currentModel.sourceOptions.selectedSources}}" max-width="300px">

                 <oj-bind-for-each data="[[sourceFileOptions]]"> //'sourceFileOptions' is the observable array i am trying to update

                         <template>

                                  <oj-option value="[[$current.data.value]]" :title="[[[[$current.data.label]]]]" class="filterSourceName"><oj-bind-text value="[[$current.data.label]]"></oj-bind-text></oj-option>

                          </template>

                    </oj-bind-for-each>

        </oj-select-many>

       

      The js code where i am updating the observable array (sourceFileOptions) referenced in the UI

           updateSourceList: function(newSourceList){

                if (newSourceList && newSourceList.length > 1){

                    var filter = require('filter');

                    filter.sourceFileOptions.removeAll(); //clearing the current entries in the array

                     //add new entries

                    for (var i=0 ; i< newSourceList.length; i++ ){

                       var fileName =  newSourceList[i];

                       filter.sourceFileOptions.push({value:fileName, label:fileName});

                    }

                    $("#filterSources")[0].refresh();

                }

          }

      I tried to reset the array entries in the cook book example for select many using ForEach: https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=selectMany&demo=dataforeach . I am facing the same issue here as well. Calling 'removeAll' on the observable array is not reflected in the UI, while the same logic works when i try with select many using options binding: https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=selectMany&demo=optionsBinding

      Any idea why this does not work with ForEach biinding?

       

      Thanks in Advance!

        • 1. Re: UI not updated when KO observable array is updated
          John 'JB' Brock-Oracle

          Sorry for the late reply on this one.  If you are using the for-each approach, you will need to call .refresh() on the oj-select-many/one element after the modification to the children.  The parent element has no idea that you changes the DOM inside of it when you are changing the forEach binding.  If you use the options attribute on the component, the changes are done to the component itself and it now knows to refresh itself.  The use of forEach is not recommended when the options binding approach is available.

           

          --jb

          • 2. Re: UI not updated when KO observable array is updated
            3137215

            Thanks for the response. I had called refresh method on oj-select-many component. The newly added entries in the observable array was visible in the UI, but the removal of old entries did not reflect in the UI. I had to choose the forEach over options binding, as there is a requirement to set the title attribute for every option. That level of control was not available when using 'options' attribute and the forEach option was suggested in the post, how to set title attribute for options in select many component .

            Is there a way to set the title attribute for every option while using options attribute?

            Right now I am using ko-foreach instead of 'oj-bind-for-each' due to the original issues mentioned above, is it not a recommended solution?