Question

请原谅我这个愚蠢的问题，我知道你不应该把把握逻辑放在把手的表情中，但我对此并不熟悉，而且我也不确定如何绕过它。 / p>

基本上我想根据手柄表达式的值更改按钮的文本，但我不知道如何在我{{#if}}中添加逻辑运算符的情况下这样做言。

基本上，当{{form.target}}的值等于＆＃34; new＆＃34;时，我希望按钮文字说＆＃34;保存＆＃34;，如果值等于＆＃34;编辑＆＃39;，我希望文字说出＆＃34;保存更改＆＃34;。

如果可以的话，这就是我编写它的方式：

<button>
    {{#if {{form.target}} == 'new'}}
        Save
    {{#else if {{form.target}} == 'edit'}}
        Save Changes
    {{/if}} 
</button>

显然我离这里不远，所以我希望有人能指出我这样做的正确方法吗？

Answer 1

您可以注册帮助

<button>
    {{#equals form.target "new"}}
        Save
    {{else}}
        {{#equals form.target "edit"}}
            Save Changes
        {{/equals}} 
    {{/equals}} 
</button>

Handlebars.registerHelper("equals", function(string1 ,string2, options) {
    if (string1 === string2) {
        return options.fn(this);
    } else {
        return options.inverse(this);
    }
});

Answer 2

理想情况下，您希望在form对象上创建一个属性，以便为您提供所需的信息，例如： form.targetIsNew和/或form.targetIsEdit。如果您事先设置了它，那么您可以在if / else块中使用它。

因此，在渲染手柄模板之前，请设置其中一个属性：

form.targetIsNew = form.target == 'new';

如果事情更复杂，您也可以使用block helpers。

Answer 3

您的正确指导是限制视图中逻辑的使用。有时你会需要它，但在这个例子中我们可以不用。

Handlebars正在引用作为context传递给模板函数的值。您可以使用一些分支逻辑将变量分配给您需要的值，然后在模板中直接引用该值。

细节将根据您使用把手的方式而有所不同，但这里有一个例子：

<script id="some-template" type="text/x-handlebars-template">
    <button>
        {{formSubmissionText}}
    </button>
</script>

<div id="my-app"></div>

<script>
    // create `template` function that will render the view
    let source = document.getElementById("some-template").innerHTML;
    let template = Handlebars.compile(source);

    // construct the context we'll bind to our template
    let form = getForm(); // change this to match your use
    let formSubmissionText = "Save";
    if (form.target === "edit") {
        formSubmissionText = "Save Changes";
    }

    let context = {
        formSubmissionText: formSubmissionText
    };

    // render the template
    let html = template(context);
    document.getElementById("my-app").innerHTML = html;
</script>

Handlebars中的逻辑if / else语句？

3 个答案: