Question

现在，我并不是指将帮助者传递给孩子的不同情境。不，我的意思是帮助者修改他们作为副作用传递的上下文。

示例和用例：

Handlebars.registerHelper('sortByFoo', function(elts) {
    elts.sort((elt1, elt2) => elt1.foo.localeCompare(elt2.foo));
    return "";
})

Handlebars.registerHelper('sortByBar', function(elts) {
    elts.sort((elt1, elt2) => (elt1.bar - elt2.bar));
    return "";
})

var context = {elements: [
    {foo: 'asdf', bar: 5},
    {foo: 'jkl', bar: 4}
]}

var source = document.getElementById('template').innerHTML;
var template = Handlebars.compile(source);

document.getElementById('result').innerHTML = template(context);

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.js"></script>
<script id="template" type="text/x-handlebars-template">
    {{sortByFoo elements}}
    <h2>Elements sorted by Foo:</h2>
    <ul>
        {{#each elements}}
  	        <li>{{foo}}, {{bar}}</li>
        {{/each}}
    </ul>
    {{sortByBar elements}}
    <h2>Elements sorted by Bar:</h2>
    <ul>
        {{#each elements}}
  	        <li>{{foo}}, {{bar}}</li>
        {{/each}}
    </ul>
</script>

<div id="result"></div>

车把上是否允许这种东西？它似乎可以在这个片段中工作，但是... Handlebars文档非常详细地介绍了将不同的上下文传递给子元素的各种方法，但没有提到帮助者能够修改自己的上下文，这让我想到了什么我所做的可能不是Handlebars的预期用法，如果它起作用，它只是意外 - 而且如果我不想很快遇到迫在眉睫的麻烦，我应该停止这样做。

Handlebars上是否允许这样的东西？

Answer 1

这可能有用。我只是把每个帮助器都带到了hbs，但是在你的帮助器中添加了排序功能。

ul.breadcrumb-checkout {
    margin: 0px 10px 20px;
}

ul.breadcrumb-checkout li {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    width: 200px;
    margin: 5px 10px 0 0;
    position: relative;
    text-align:center;
}

ul.breadcrumb-checkout li:before {
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    left: -2px;
    border-style: solid;
    border-width: 15px 0 15px 15px;
    border-color: transparent transparent transparent #fff;
    z-index: 0;
}

ul.breadcrumb-checkout li:first-child:before {
    border-color: transparent;
}

ul.breadcrumb-checkout li a:after {
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    right: -15px;
    border-style: solid;
    border-width: 15px 0 15px 15px;
    border-color: transparent transparent transparent #F3F3F3;
    z-index: 10;
}

ul.breadcrumb-checkout li.active a {
    background: #009DD9;
    z-index: 100;
    color: white;
}

ul.breadcrumb-checkout li.active a:after {
    border-left-color: #009DD9;
}

ul.breadcrumb-checkout li a {
    display: block;
    background: #F3F3F3;
}

ul.breadcrumb-checkout li a:hover {
    background: #3CA6DE;
}

ul.breadcrumb-checkout li a:hover:after {
    border-color: transparent transparent transparent #3CA6DE; 
}

.breadcrumb-checkout a {
    text-decoration: none;
    color: #817D7D;
}

.breadcrumb-checkout{
    text-align:center;
}

@media (max-width:680px){
    .breadcrumb_text{
        display:none;
    }
    ul.breadcrumb-checkout li{
        width: 80px;
    }
}

然后

Handlebars.registerHelper('eachSorted', function(context, options) {
  var ret = "";
  var arr = context.slice();
  arr.sort((elt1, elt2) => elt1.foo.localeCompare(elt2.foo));

  for(var i = 0; i < arr.length; i++) {
    ret = ret + options.fn(arr[i]);
  }

  return ret;
});

是否允许Handlebars助手编辑他们的上下文？

1 个答案: