JQuery 模板 - 调用 ${$item.function()} 的次数超过了模板中指定的次数答案

【问题标题】：JQuery Template - Calls ${$item.function()} more than is specified in the templateJQuery 模板 - 调用 ${$item.function()} 的次数超过了模板中指定的次数
【发布时间】：2011-09-30 18:53:31
【问题描述】：

Jquery-tmpl 似乎多次调用您附加到 item 的函数。

JSfiddle：http://jsfiddle.net/abQwc/2/

对于模板呈现的每个项目，console.log 的 show rowCount 被调用 4 次。

模板：

<h1 class="${$item.rowCount() % 2 == 0 ? "even" : "odd"}">${Name} - ${Payload}</h1

数据：

    data = [
        { Name: "1", Payload: "Data1" },
        { Name: "2", Payload: "Data2" },
        { Name: "3", Payload: "Data3" } 
    ]

脚本：

    $(function() {$( "#template" )
        .tmpl(data, {
            rowCount: function(){
                var rowCount = 0;
                return function(){
                    console.log(this.data.Payload);
                    return ++rowCount;
                }
            }()
        })
        .appendTo( "body" )})

为什么？我已经想出了如何绕过它，但它散发着巫术的味道。

【问题讨论】：

return (++rowCount)%2 ? 'even':'odd'; 是你的巫术吗？
不，模板中的${($item.rowCount() / 4) % 2 ? 'even' : 'odd'}是恶魔
这可能值得一试：jsfiddle.net/abQwc/3
确实有效。为什么会简单地 ++rowCount 导致它被调用 4 次呢？另外，您引用了 rowCount 函数但没有执行它（item.rowCount() vs item.rowCount），该函数是如何执行的？

标签： javascript jquery closures jquery-templates

【解决方案1】：

我换了：

${$item.rowCount() % 2 == 0 ? "even" : "odd"}
...
return function(){
    console.log(this.data.Payload);
    return ++counter;
}

与

${$item.rowCount()}
....
return function() {
    console.log(this.data.Payload);
    return (++counter) % 2 ? 'even' : 'odd';
}

并且能够让它工作。但是，Options 参数仍然为每个项目执行 4 次。我相信在 tmpl 中这样的计算充其量仍然是不确定的。

【讨论】：