JQuery 模板 - 获取 JSONList 的索引答案

【问题标题】：JQuery Template - Getting Index of a JSONListJQuery 模板 - 获取 JSONList 的索引
【发布时间】：2011-09-09 01:40:57
【问题描述】：

您好，我有一个 jsonlist 对象，我将它发送到模板。我想将项目索引发送到 getSurname 方法以从 json 对象中获取项目。那么如何获取jsonList项的索引呢？

我的模板：

$.template('deneme',
 '<div>${name}: <input onClick='getSurname(\"${$index}\")' 
  type='checkbox' /></div>

我的 Json 列表：

[{"name":"Sedat","surname":"Basar"},
{"name":"Deneme","surname":"Avile"},
{"name":"Ganmaz","surname":"Oyilmna"}]

function getSurname(){
....???
}

【问题讨论】：

标签： jquery json jquery-templates

【解决方案1】：

对此有两个想法：

1- 您可以将整个数组传递给模板并更好地访问索引/项目信息，而不是让模板在数组的每个项目上运行。

var data = [{"name":"Sedat","surname":"Basar"},
{"name":"Deneme","surname":"Avile"},
{"name":"Ganmaz","surname":"Oyilmna"}];

$("#deneme").tmpl({ people: data }).appendTo("#content");

<script id="deneme" type="text/html">
    {{each(i, person) people}}
    <div>
        ${name}: <input onClick='getSurname("${i}")' type='checkbox' />
    </div>
    {{/each}}
    <hr />
</script>

2- 另一种选择是使用模板插件的tmplItem 功能。这看起来像：

var data = [{"name":"Sedat","surname":"Basar"},
{"name":"Deneme","surname":"Avile"},
{"name":"Ganmaz","surname":"Oyilmna"}];

function getSurname(element){
    var data = $(element).tmplItem().data;
    alert(data.surname);
}


$("#deneme").tmpl(data).appendTo("#content");

<script id="deneme" type="text/html">
    <div>
        ${name}: <input onClick='getSurname(this)' type='checkbox' />
    </div>
</script>

示例：http://jsfiddle.net/rniemeyer/XCThu/

【讨论】：