Ractive框架动态修改表格行背景功能失效求助

问题分析 #

你的代码存在两处关键问题：

1. 模板表达式的变量引用错误：在#each循环内部，引用外层上下文的testNumberSelected时，{testNumberSelected}的写法不符合Ractive模板语法，且未正确指定上下文层级。
2. 点击事件的参数传递写法错误：on-click="testFunction:{testNumber: {{.testNumber}}}"中嵌套了{{}}，会导致模板解析异常。

修正后的代码 #

模板部分 #

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

事件处理函数（优化变量声明） #

function testFunction(ev, cfg) {
    var rjs = this;
    var testNumber = cfg.testNumber; // 声明局部变量，避免污染全局作用域
    rjs.set('testNumberSelected', testNumber);
}

关键修正点说明 #

• 上下文层级访问：在#each循环内部，当前上下文是physicianList的单个元素，要访问外层的testNumberSelected，需使用../testNumberSelected（向上一级上下文查找），或者@root.testNumberSelected（直接访问根上下文变量）。
• 事件参数传递：Ractive事件绑定中，传递对象参数时直接使用上下文变量名即可，无需额外用{{}}包裹，{testNumber: .testNumber}就能正确传递当前行的testNumber属性。

内容的提问来源于stack exchange，提问作者caracol