On the first load since the signal is not initialised the template vars are not replaced.
Clicking this button will set the signal sigH1 to a string containing a JSON array ( see the emulator section )
<p> On the first load since the signal is not initialised the template vars are not replaced. Clicking this button will set the signal <b>sigH1</b> to a string containing a JSON array ( see the emulator section ) <ch5-button label="Btn1" sendEventOnClick="trigH1"></ch5-button> </p> <ch5-list size="5" orientation="horizontal" indexId="idx" minWidth="250px" maxWidth="500px" minHeight="100px" maxHeight="150px" itemWidth="125px" itemHeight="75px" scrollbar="true" receiveStateTemplateVars="sigH1"> <template> <div class="horizontal-list-item"> <span class="{{cssClass}}">item_{{idx}} {{label}}</span> </div> </template> </ch5-list>
.horizontal-list-item { border: 1px solid transparent; color: #155724; background-color: #d4edda; border-color: #c3e6cb; display: table; width: 100%; height: 100%; } .horizontal-list-item span { display: table-cell; vertical-align: middle; text-align: center; } .red { background-color:red; color:white; } .green { background-color:green; color:white; } .blue { background-color:blue; color:white; }
On the first load since the signal is not initilised the template vars are not replaced.
Clicking this button will set the signal sigV1 to a string containing a JSON array ( see the emulator section )
<p> On the first load since the signal is not initilised the template vars are not replaced. Clicking this button will set the signal <b>sigV1</b> to a string containing a JSON array ( see the emulator section ) <ch5-button label="Btn1" sendEventOnClick="trigV1"></ch5-button> </p> <ch5-list size="5" orientation="vertical" indexId="idx" minWidth="150px" maxWidth="165px" minHeight="100px" maxHeight="150px" itemWidth="150px" itemHeight="75px" scrollbar="true" receiveStateTemplateVars="sigV1"> <template> <div class="horizontal-list-item"> <span class="{{cssClass}}">item_{{idx}} {{label}}</span> </div> </template> </ch5-list>
.vertical-list-item { border: 1px solid transparent; color: #155724; background-color: #d4edda; border-color: #c3e6cb; display: table; width: 100%; height: 100%; } .vertical-list-item span { display: table-cell; vertical-align: middle; text-align: center; } .red { background-color:red; color:white; } .green { background-color:green; color:white; } .blue { background-color:blue; color:white; }