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

Question

我刚开始使用 handlebars，你不能将 Js 与模板一起使用，所以你必须使用 helpers(?) 左右我让自己相信。

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

所以如果我的 URL 是 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);

自定义块助手 '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。

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

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

Change expression based on url hash - handlebars.js

javascript

url

hash

handlebars.js