2014-09-01 59 views
16

我可以爲Handlebars`模板佔位符指定默認值嗎?Handlebars`模板佔位符的默認值

<script type="x-handlebars-template" id="menu-edit-form-tpl"> 
    <form method="{{method}}" action="{{action}}" class="menu-edit-form"> 
...      
    </form> 
</script> 

我可以指定{{method}}和{{action}}的默認值並在傳遞給編譯模板的對象中跳過它們嗎?

回答

26

把手沒有「默認值」。
您應該使用{{if}}語句來檢查屬性是否已設置。

<script type="x-handlebars-template" id="menu-edit-form-tpl"> 
    <form method="{{if method}}{{method}}{{else}}POST{{/if}}" action="{{if action}}{{action}}{{else}}/{{/if}}" class="menu-edit-form"> 
... 
    </form> 
</script> 

或者,如果你想有點更清晰的語法,使用簡單的輔助:

Handlebars.registerHelper('safeVal', function (value, safeValue) { 
    var out = value || safeValue; 
    return new Handlebars.SafeString(out); 
}); 

它允許你這樣寫:

<script type="x-handlebars-template" id="menu-edit-form-tpl"> 
    <form method="{{safeVal method 'POST'}}" action="{{safeVal action '/'}}" class="menu-edit-form"> 
... 
    </form> 
</script> 
+4

對我來說,只有在寫'{{#if}}'而不是'{{if }(我正在使用metalsmit 1H) – hgoebl 2016-10-20 06:33:14

+0

另一種選擇是使用或餘燼真理助手,給人的語法: {{或方法「POST」}} 從使用餘燼真相助手: https://github.com/jmurphyau/燼真理,助手 – 2017-07-20 03:42:15

1

您可以註冊一個helperMissing幫助其將在您的模板中定義值時調用,但不會在您的上下文中調用(如果不希望缺失值默默失敗,則可用):

Handlebars.registerHelper("helperMissing", function(context, options) { 
    console.error("Template defines {{" + context.name + "}}, but not provided in context"); 
    return "{{" + context.name + "}}"; 
}); 
3

這裏是我的簡單的解決方案

首先我們創建一個名爲 '選擇'

Handlebars.registerHelper('choose', function (a, b) {return a ? a : b;}); 

然後我們用它在模板:)

<p> 
{{choose valueFromData 'default-value-in-template'}} 
<p> 
非常基本的幫手

或當然我們可以做

<p> 
    {{choose valueFromData defaultValueFromData}} 
    <p> 

所以你的情況:

<form method="{{choose method 'get'}}" action="{{choose action 'action.php'}}" class="menu-edit-form"> 
...      
    </form> 

希望它可以幫助別人,因爲這是別人從2014年起:)

2

這個問題和它的接受的答案是相當老了很多新的特性和功能有自從寫完以後,它們被添加到句柄中。

我設法通過使用在4.0版中發佈的partial blocks來獲得默認值的功能。0 - 讓你的模板最終會看起來像這樣:

<script type="x-handlebars-template" id="menu-edit-form-tpl"> 
    <form method="{{#> method}}get{{/method}}" action="{{#> action}}index.php{{/action}}" class="menu-edit-form"> 
...      
    </form> 
</script> 

然後,它只是通過做這樣的事情在你的methodaction的泛音傳遞的情況:

var source = $('#menu-edit-form-tpl').html(), 
    template = Handlebars.compile(source), 
    html = template({}, { 
     partials: { 
      action: 'contact-form.php' 
     } 
    }); 

在生成的HTML該方法將默認爲get,動作將是contact-form.php - 我在codepen上做了一個小小的演示:http://codepen.io/andyexeter/pen/LRpJag