方法1：自定义访问者

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}}

在那些评论中，我有INDEX。我想根据他们的索引显示评论。评论0 评论1 评论2 评论3 .....

如何使用自定义功能实现此目的？感谢

Answer 1

方法1：自定义访问者

如果您可以控制上下文（并且您可能已经执行），则可以使用属性访问器来实现此操作。假设您的上下文包含混乱顺序的注释：

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：把手Block Helper

另一种方法是实施Handlebars block helper。如果您对上下文没有太多控制（或者不希望使用自定义属性污染它），则此方法将更好地工作。只需注册一个Handlebars助手：

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 };

句柄标记 客户端

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

调用帮助程序并添加3个参数

第一个参数包括要排序的所有数据data

第二个参数是按'shoes'
排序的值
第3个参数是排序数据'Jordans'
的标题

Handlebars.js自定义函数排序

2 个答案:

方法1：自定义访问者

方法2：把手Block Helper