javascript - 根据 url 哈希更改表达式 -handlebars.js

Question

我刚刚开始使用 Handlebars ，你不能将 Js 与模板一起使用，所以你必须使用助手(？)或者所以我让自己相信。

我想根据 URL 哈希更改我的表达式。

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

我知道我可以使用 var hash = window.location.hash; 获取哈希值，并且通常将其与 +hash+ 一起使用，但对于 Handlebars 我不能不使用据我所知？

我知道这可能不好，因为用户可以输入#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

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

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

因此 Handlebars 调用将类似于:

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

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

自定义 block 助手“customEach”可能类似于以下内容:

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

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

请注意，在辅助程序(即一些 JS 代码)中，确实可以访问 URL 的哈希组件。

Handlebars 插件传递给我们的助手的选项参数包含一个名为 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 未在我们的原始上下文中定义。

我还没有测试我的代码。但即使失败了，我也希望其背后的想法是清晰的。