Handlebars.js пользовательская функция sort

Question

Я использую Handlebars для отображения комментариев.

{{#each COMMENTS}} 
    <div class="heightfix"> 
      <div class="commentIcon"></div>&nbsp;&nbsp; 
      <label id="commentDate1" class="bold">{{COMMENTON}}</label>:&nbsp; 
      <label id="commentCreator1" class="bold">{{COMMENTBY_FIRSTNAME}} {{COMMENTBY_LASTNAME}}</label>&nbsp;&nbsp; 
      <label class="commentContent" id="commenttext_{{ID}}">{{COMMENTTEXT}}</label> 
    </div>         
{{/each}} 

В этих КОММЕНТАРИИ У меня есть ИНДЕКС. Я бы хотел показать комментарии в соответствии с их индексом. Комментарий 0 Комментарий 1 Комментарий 2 Комментарий 3 .....

Как достичь этого с помощью пользовательских функций? Благодаря

Answer 1

Метод 1: Пользовательский Accessor

Если у вас есть контроль над контекстом (и вы, вероятно), вы можете реализовать это с аксессорами собственности. Допустим, ваш контекст содержит комментарии в случайном порядке:

var context = { 
    comments: [ 
     { idx:6, text:'violet' }, 
     { idx:1, text:'orange' }, 
     { idx:0, text:'red' }, 
     { idx:5, text:'indigo' }, 
     { idx:3, text:'green' }, 
     { idx:2, text:'yellow' }, 
     { idx:4, text:'blue' }, 
    ], 
}; 

Вы можете просто отсортировать comments массив на месте перед визуализацией шаблона (обратите внимание, что для числовых значений, можно просто вычесть их, чтобы получить естественный порядок):

context.comments.sort(function(a,b) { return a.idx - b.idx; }); 

Проблема в том, что будет изменен объект контекста, который вы, возможно, не захотите делать. Решение состоит в том, чтобы предоставить пользовательский аксессуар , который будет возвращать комментарии, отсортированные по специальному свойству. Вот как мы можем сделать это:

Object.defineProperty(context, 'commentsByIdx', { 
    get: function() { 
     // note that we call concat() to create a copy of 
     // the array; otherwise we are modifying the 
     // the original array, which is a side effect 
     return this.comments.concat() 
      .sort(function(a,b) { return a.idx - b.idx }); 
    } 
}); 

Вы можете увидеть это решение в действии здесь: http://jsfiddle.net/Jammerwoch/ShZLY/

Способ 2: рули Блок Helper

Другой подход заключается в реализации Handlebars block helper. Этот подход будет работать лучше, если у вас нет большого контроля над контекстом (или вы не хотите заражать его настраиваемыми свойствами). Просто зарегистрировать помощника Рули:

Handlebars.registerHelper('eachByIdx', function(context,options){ 
    var output = ''; 
    var contextSorted = context.concat() 
     .sort(function(a,b) { return a.idx - b.idx }); 
    for(var i=0, j=contextSorted.length; i<j; i++) { 
     output += options.fn(contextSorted[i]); 
    } 
    return output; 
}); 

И называть это как так в шаблоне:

{{#eachByIdx comments}} 
    <li>{{text}}</li> 
{{/eachByIdx}} 

в действии здесь: http://jsfiddle.net/Jammerwoch/aeCYg/1/

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

Answer 2

Ниже я сортировочные пункты для галереи изображений

нужно знать

• Функция принимает в 3 периметров
  • данные для сортировки
  • значение для сортировки
  • заголовок для отсортированных данных
• Функция возвращает HTML с отсортированного

ДАННЫЕ

{ 
"imageUrl" : "img/shoes.jpg", 
"category" : "shoes" 
}, 
{ 
"imageUrl" : "img/hat.jpg", 
"category" : "hat" 
} 

JS Узел Сортировать Функциястороне сервера

"use strict"; 
var helpers = module.exports; 

helpers.sort = function(data, value, heading) { 
var str = '<div class="row">'+ 
'<div class="container headings">'+ 
    '<h2 class="center">'+heading+'</h2>'+ // heading data from Markdown 
    '<hr>'+ 
'</div>'+ 
'<div class="swap"><i class="material-icons">swap_horiz</i></div>'+ 
'<div class="carousel">'; 
data.forEach(function(gal){ // loop through all data 
if (gal.category === value) { // sort data by value 
str += '<a class="carousel-item" href="#!"><img src="'+gal.imageUrl+'" alt="gallery_image"></a>'; // gallery item 

} 
}) 
str += '</div>'+ 
     '</div>'+ 
     '</div>'; 
return str; // return sorted html data 
}; 

Рулей Markupстороны клиента

{{#sort data 'shoes' 'Jordans'}}{{/sort}} 

• вызова помощник и добавьте 3 параметра
  • первого параметр включает в себя все данные должны быть отсортированы data
  • второго параметра значения для сортировки по 'shoes'
  • 3-й параметр - это заголовок для отсортированных данных 'Jordans'