Question

我刚刚开始使用把手，你不能将Js与模板一起使用，因此你必须使用助手（？）或者我自己相信。

我想根据网址哈希改变我的表达方式。

因此，如果我的网址为www.mysite.com/template.html#new，我希望#each为{{#each New}}，如果是/template.html#anythingelse，我希望将其更改为{{#each anythingelse}} }

我知道我可以使用var hash = window.location.hash;来获取哈希值，并且通常会将其与+hash+一起使用，但是根据我所知，我不能不使用把手吗？

我理解可能不太好，因为用户可以输入#anythingtheywant但是我使用它的方式无关紧要。

    <ul>
        {{#each New}}
         {{#each genres}}

            <li>{{genre-name}}
                <ul style="list-style-type:none"> 
                    {{#each list}}
                        <li>{{name}}</li>
                    {{/each}}
                </ul> 
            </li>
        {{/each}}
        {{/each}}
    </ul>
  {{/each}}

任何帮助或见解都会令人惊叹。

Answer 1

像往常一样，有几种方法可以做到这一点。

我认为这里必须有一个自己的写块助手。我们将它命名为customEach。更进一步，让templateName成为我们模板的名称。对于此解决方案，我们必须确保将所有数组传递给Handlebars。在作者的例子中，这将是一个名为new的数组，一个名为anythingelse的数组。

因此，Handlebars调用将类似于：

var ctx = { 
    new: new, 
    anythingelse: anythingelse 
};

Handlebars.templates["templateName"](ctx);

自定义块助手＆＃39; customEach＆＃39;可能会出现以下情况：

Handlebars.registerHelper('customEach', function(options) {
    var hash = window.location.hash.substr(1);

    return options.fn(this[hash]);
});

请注意，在帮助程序（只是一些JS代码）中，可以访问URL的哈希组件。

Handlebars插件传递给我们的助手的options参数包含一个名为fn的函数。它表现为普通的编译模板。所以只需将想要的数组传递给它（this保存当前上下文，该上下文对应于我们之前传递给Handlebars的ctx变量。换句话说，fn只处理{{#customEach}}和{{/customEach}}之间定义的内容。

新模板将是：

<ul>
    {{#customEach}}
        {{#each genres}}
            <li>{{genre-name}}
                <ul style="list-style-type:none"> 
                    {{#each list}}
                        <li>{{name}}</li>
                    {{/each}}
                </ul> 
            </li>
        {{/each}}
    {{/customEach}}
</ul>

当然应该在这里实现一些错误处理，例如如果在我们的原始上下文中没有定义特定的哈希值#anythingtheywant。

我还没有测试过我的代码。但即使它失败了，我也希望它背后的想法很明确。

根据url hash更改表达式 - handlebars.js

1 个答案: