Forum Stats

  • 3,767,820 Users
  • 2,252,720 Discussions
  • 7,874,337 Comments

Discussions

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

User_INPR6
User_INPR6 Member Posts: 10 Green Ribbon
edited Sep 27, 2021 9:50PM in Oracle JET

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"}]);

Best Answer

Answers