How do i refesh <oj-bind-for-each>

User_INPR6

Hey there,

Im trying to create a <oj-bind-for-each> with buttons inside and when one of this buttons is clicked the template inside the <oj-bind-for-each> should be refreshed.

My Code looks like this:

<div>
    <div>
        <h1 id="value1">Für welchen Bereich möchten Sie sich anmelden?</h1>
    </div>
    <div style="display: inline-flex;">
       <div class="marginleft">
        <oj-bind-for-each id="databind1" data="{{buttons_dyn}}">
            <template>
             <oj-button on-oj-action=[[getthisvalue]]><oj-bind-text id="button_dyn_id" value={{$current.data}}></oj-bind-text></oj-button>
            <template>
          </oj-bind-for-each>  
    </div>  
 </div>

ViewModel:

define(["appController", "knockout", "ojs/ojarraydataprovider", "GebaeudeHelper", "ojs/ojinputtext", "ojs/ojlabel", "ojs/ojbutton", "ojs/ojformlayout", "ojs/ojcheckboxset", "ojs/ojlabelvalue", "ojs/ojrefresher"],
tri  function (app, ko, ArrayDataProvider) {
    function AnBereichViewModel() {
      gebaeude = [
        { Gebaeud: "A123" },
        { Gebaeud: "A124" },
        { Gebaeud: "A126" },
        { Gebaeud: "B153" },
        { Gebaeud: "B163" },
        { Gebaeud: "F234" },
        { Gebaeud: "F344" },
        { Gebaeud: "F534" },
        { Gebaeud: "F364" },
        { Gebaeud: "E554" },
        { Gebaeud: "E553" },
        { Gebaeud: "E556" },
        { Gebaeud: "C554" }
      ];

      
      let final_g = "";
      schleifen_checker = false;
      geb = "";

      function getnext(geb) {
        g = [];
        app.aufbau_array = [];

        for (i = 0; i < gebaeude.length; i++) {
          if (gebaeude[i].Gebaeud.substr(0, this.geb.length) == this.geb) {
            console.log(i);
           if (!g.includes(gebaeude[i].Gebaeud.substr(this.geb.length, 1))) {
            g.push(gebaeude[i].Gebaeud.substr(this.geb.length, 1));
            console.log(g);
           }       
          };
        };
        return g;
      };

     app.aufbau_array = getnext();

      this.getthisvalue = function () {
        this.geb = "A";
        app.aufbau_array = getnext(
          this.geb
        );
        
        console.log("Aufbau Array ist" + app.aufbau_array);
        
      };

      this.buttons_dyn = new ArrayDataProvider(app.aufbau_array, {


      });


      this.buttons_dyn.addEventListener("refresh", console.log("ja"));
//This Event is not triggert if a button is clicked
      
      }
    return AnBereichViewModel;
  }
);

In my AppController i created a Observable Array

this.aufbau_array = ko.observableArray([]);

It works fine when the View is loaded and on Button Click the aufbau_array changes, but somehow the HTML Elements are not refreshed (if i change the Router-State it works). How can i solve that?

Also: Is there a way to get the value of the button that is clicked?

Thank you

Update: Solved. You have to use test_array.push({test: //add your things here}); and the Observable Array needs to have an Attribute like this this.test_array = ko.observableArray([{ testAtt: "test"}]);

John 'JB' Brock-Oracle

Philip's answer is the correct one. Doing what you have as the "solved" approach will lead down a very fragile path as upgrades are made.

Philip Sommer

Hi INPR6,

I think your issue is that the aufbau_array is not an (knockout) observable array and as such the changes to it do not propagate automatically to your view. So it must be defined as

app.aufbau_array = ko.observableArray();

And assigned as

app.aufbau_array(getnext(this.geb);

As a side note, I would recommend using standard JET components for creating a buttonset. For example with oj-buttonset-one: https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=buttonsetone&demo=buttonRadios

Kind Regards,

Philip

John 'JB' Brock-Oracle

Philip's answer is the correct one. Doing what you have as the "solved" approach will lead down a very fragile path as upgrades are made.