Я использую Handlebars в своем проекте. Я хочу показать только первый элемент в массиве. Как я могу это сделать?

<body> 

<!--This is our template. --> 
<!--Data will be inserted in its according place, replacing the brackets.--> 
<script id="t" type="text/x-handlebars"> 
    {{#each_when profile "gender" "female"}} 
     {{from}} ({{gender}})<br> 
    {{/each_when}} 
</script> 

<!--Your new content will be displayed in here--> 
<div class="content-placeholder"></div> 

<script> 
var json = { 
    "profile": [ 
     { "gender": "female", "from": "Olivia" }, 
     { "gender": "female", "from": "Meagen" }, 
     { "gender": "female", "from": "Aaron" }, 
     { "gender": "female", "from": "Aaron" } 
    ] 
}; 

Handlebars.registerHelper('each_when', function(list, k, v, opts) { 
    console.log(arguments); 
    var i, result = ''; 
    for(i = 0; i < list.length; ++i) 
     if(list[i][k] == v) 
      result = result + opts.fn(list[i]); 
    return result; 
}); 

Handlebars.registerHelper('get_length', function (obj) { 
return obj.length; 
}); 


var t = Handlebars.compile($('#t').html()); 
$('body').append(t(json)); 
</script> 
</body>

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Page Title</title> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script> 
 
</head> 
 
<body> 
 

 
<!--This is our template. --> 
 
<!--Data will be inserted in its according place, replacing the brackets.--> 
 
<script id="t" type="text/x-handlebars"> 
 
    {{#each_when profile "gender" "female"}} 
 
     {{from}} ({{gender}})<br> 
 
    {{/each_when}} 
 
</script> 
 

 
<!--Your new content will be displayed in here--> 
 
<div class="content-placeholder"></div> 
 

 
<script> 
 
var json = { 
 
    "profile": [ 
 
     { "gender": "female", "from": "Olivia" }, 
 
     { "gender": "female", "from": "Meagen" }, 
 
     { "gender": "female", "from": "Aaron" }, 
 
     { "gender": "female", "from": "Aaron" } 
 
    ] 
 
}; 
 

 
Handlebars.registerHelper('each_when', function(list, k, v, opts) { 
 
    console.log(arguments); 
 
    var i, result = ''; 
 
    for(i = 0; i < list.length; ++i) 
 
     if(list[i][k] == v) 
 
      result = result + opts.fn(list[i]); 
 
    return result; 
 
}); 
 

 
Handlebars.registerHelper('get_length', function (obj) { 
 
return obj.length; 
 
}); 
 

 

 
var t = Handlebars.compile($('#t').html()); 
 
$('body').append(t(json)); 
 
</script> 
 
</body> 
 
</html>

Результат:

Оливия (женщина)
Meagen (женщина)
Aaron (женщина)
Aaron (женщина)

, но я хочу только первые один:

Оливия (женский)

Кроме того, я использую {{}} @index показать индекс массива, но это не работает для меня. Я что-то упускаю?

источник

2017-02-18 Rehaan Kkhaan

Вы говорите, что используете {{@index}}, но в своем коде я его не вижу. Я что-то упускаю? – 76484

Вы хотите, чтобы первый элемент в массиве _after_ был отфильтрован для «женщин» или «раньше»? – 76484

Да, я хочу, чтобы первый элемент в массиве после его фильтрации. –

Изменения хелпера:

Handlebars.registerHelper('each_when', function(list, k, v, opts) { 
    var match = list.findIndex(function(item) { 
    return (item[k] === v); 
    }); 
    return (match >= 0) ? opts.fn(list[match]) : ''; 
});

Вы хотите найти первый матч и возвращать результаты только для этого матча.

Вот полный HTML работает, чтобы показать только первый матч:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Page Title</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script> 
 
</head> 
 
<body> 
 

 
<!--This is our template. --> 
 
<!--Data will be inserted in its according place, replacing the brackets.--> 
 
<script id="t" type="text/x-handlebars"> 
 
    {{#each_when profile "gender" "female"}} 
 
    {{from}} ({{gender}})<br> 
 
    {{/each_when}} 
 
</script> 
 

 
<!--Your new content will be displayed in here--> 
 
<div class="content-placeholder"></div> 
 

 
<script> 
 
    var json = { 
 
     "profile": [ 
 
      { "gender": "female", "from": "Olivia" }, 
 
      { "gender": "female", "from": "Meagen" }, 
 
      { "gender": "male", "from": "Aaron" }, 
 
      { "gender": "male", "from": "Aaron" } 
 
     ] 
 
    }; 
 

 
    Handlebars.registerHelper('each_when', function(list, k, v, opts) { 
 
     var match = list.findIndex(function(item) { 
 
      return (item[k] === v); 
 
     }); 
 
     return (match >= 0) ? opts.fn(list[match]) : ''; 
 
    }); 
 

 
    Handlebars.registerHelper('get_length', function (obj) { 
 
     return obj.length; 
 
    }); 
 

 

 
    var t = Handlebars.compile($('#t').html()); 
 
    $('body').append(t(json)); 
 
</script> 
 
</body> 
 
</html>

EDITED ПРОДЛИТЬ С затребовать от COMMENT:

Чтобы получить первое лицо для каждого уникального пола , вы можете добавить другой хелпер:

Handlebars.registerHelper('each_unique', function(list, k, opts) { 
    var foundKeys = {}, 
    results = ''; 
    list.forEach(function(item) { 
    if (!foundKeys[item[k]]) { 
     results = results + opts.fn(item); 
     foundKeys[item[k]] = true; 
    } 
    }); 
    return results; 
});

Чтобы использовать это, попробуйте этот отредактированный образец (в нем есть примеры, которые показывают уникальный по gender и уникальный по from.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Page Title</title> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script> 
 
    </head> 
 
    <body> 
 

 
    <!--This is our template. --> 
 
<!--Data will be inserted in its according place, replacing the brackets.--> 
 
<script id="t" type="text/x-handlebars"> 
 
    <p>With 'each_when':</p> 
 
    {{#each_when profile "gender" "female"}} 
 
    {{from}} ({{gender}})<br> 
 
    {{/each_when}} 
 
    <hr/> 
 
    <p>With 'each_unique' on gender:</p> 
 
    {{#each_unique profile "gender"}} 
 
    {{from}} ({{gender}})<br> 
 
    {{/each_unique}} 
 
    <hr/> 
 
    <p>With 'each_unique' on from:</p> 
 
    {{#each_unique profile "from"}} 
 
    {{from}} ({{gender}})<br> 
 
    {{/each_unique}} 
 
</script> 
 

 
<!--Your new content will be displayed in here--> 
 
<div class="content-placeholder"></div> 
 

 
    <script> 
 
var json = { 
 
    "profile": [ 
 
    { "gender": "female", "from": "Olivia" }, 
 
    { "gender": "female", "from": "Meagen" }, 
 
    { "gender": "male", "from": "Aaron" }, 
 
    { "gender": "male", "from": "Aaron" } 
 
    ] 
 
}; 
 

 
Handlebars.registerHelper('each_when', function(list, k, v, opts) { 
 
    var match = list.findIndex(function(item) { 
 
    return (item[k] === v); 
 
    }); 
 
    return (match >= 0) ? opts.fn(list[match]) : ''; 
 
}); 
 

 
Handlebars.registerHelper('get_length', function (obj) { 
 
    return obj.length; 
 
}); 
 

 
Handlebars.registerHelper('each_unique', function(list, k, opts) { 
 
    var foundKeys = {}, 
 
    results = ''; 
 
    list.forEach(function(item) { 
 
    if (!foundKeys[item[k]]) { 
 
     results = results + opts.fn(item); 
 
     foundKeys[item[k]] = true; 
 
    } 
 
    }); 
 
    return results; 
 
}); 
 

 
var t = Handlebars.compile($('#t').html()); 
 
$('body').append(t(json)); 
 
</script> 
 
</body> 
 
</html>

each_unique помощник является немного более сложным в том, что мы должны отслеживать, если мы сообщили об этом ключевом значении еще. Мы делаем это, предоставляя объект foundKeys, который будет записывать каждое уникальное значение ключа, которое он находит, не позволяя ему включать дополнительные результаты с тем же значением ключа при последующих итерациях через forEach().

источник

2017-02-19 01:56:06 rasmeister

спасибо 'rasmeister'. –

У меня есть еще один вопрос из того же контекста. что, если я не фильтрую ни одного из мужского и женского пола. Я хочу показать полный массив и не хочу повторения массива. Я хочу сказать, что я просто хочу показать первое появление из каждого массива. например ** Оливия (женщина) ** и ** Аарон (мужчина) ** только. –

Я обновил свой ответ, чтобы отразить ваш дальнейший вопрос. Кроме того, я немного улучшил обработчик 'each_when', который я предоставил ранее (более чистый код). – rasmeister

Я использую Handlebars в своем проекте. Я хочу показать только первый элемент в массиве. Как я могу это сделать?

ответ

Смежные вопросы