changing row background dynamically doesn´t work

Question

changing row background dynamically doesn´t work

44 Views Asked by caracol At 18 December 2023 at 17:02

I´m new with Ractive, working on my firt project.

I have a table like this

{{#each physicianList}}
    <tr on-click="testFunction:{testNumber: {{.testNumber}}}"
        style="background-color: {{.testNumber == {testNumberSelected} ? '#cce5ff' : 'inherit'}}">
        <td>{{.testNumber}}</td>                    
    </tr>
{{/each}}

When one row is clicked, I want to change the background of that row.

function testFunction(ev, cfg) {
    var rjs = this;
    testNumber = cfg.testNumber;
    rjs.set('testNumberSelected', testNumber);
}

It doesn´t work

I think the problem must be here:

{{.testNumber == {testNumberSelected} ? '#cce5ff' : 'inherit'}}

Am I missing anythings?

Thanks for your help.

Original Q&A

There are 1 best solutions below

**ZenitoGR** · Answer 1 · 2024-01-06T13:32:36.647000

several ractive syntax errors,

like:

when you have a ractive data array like:

physicianList: [{testNumber: 0},{testNumber: 1}]

{{#each physicianList}} {{.testNumber}} {{/each}}

as you see you need the dot before the key to access the key in the each array item

I found a solution to your problem:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src='https://cdn.jsdelivr.net/npm/ractive'></script>
</head>
<body>
<div id="target" class="container"></div>
<script id="template" type='text/ractive'>
<table>
{{#each physicianList}}
<tr onclick="testFunction({{.testNumber}})" style="background-color: {{.testNumber == testNumberSelected ? '#cce5ff' : 'inherit'}}">
<td>{{.testNumber}}</td>                    
</tr>
{{/each}}
</table>
</script>

<script>
            
var ractive = new Ractive({
            el: '#target',
            template: '#template',
            data: {
                physicianList: [{testNumber: 0},{testNumber: 0},{testNumber:1}],
                testNumberSelected: 0
            },
        });   
        function testFunction(testNumber) {
                ractive.set('testNumberSelected', testNumber);
            } 
</script>
</body>
</html>

changing row background dynamically doesn´t work

There are 1 best solutions below

Related Questions in RACTIVEJS

Trending Questions

Popular # Hahtags

Popular Questions