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