在車把模板自定義條件

我已經創建瞭如下車把模板在車把模板自定義條件

<script type="text/template" id="status"> 
{{#completed status}} 
    <button class="btn btn-inverse">Close</button> 
    <button class="btn btn-primary">Submit</button> 
    <button class="btn btn-danger">Delete</button> 
{{else}} 
    <button class="btn btn-primary">Close</button> 
{{/completed}} 
</script>

這裏是我的車把寄存器幫手

Handlebars.registerHelper('completed',function(item,options){ 
if (item == 'INITIATED'){ 
    console.log(options.fn()) 
    return options.fn();   
} 
else{ 
    console.log(options.inverse()); 
    return options.inverse(); 
} 
});

而且我的javascript

obj={status: 'INITIATED'} and obj={status:'RECEIVED'} 
Handlebars.compile($('#status').html())(obj).appendTo('body')

在該status變量模板可以有值INITIATED或RECEIVED/COMPLETED

當我在控制檯中打印時，我得到例外按鈕（一次，三個按鈕和下一次按一個按鈕），但在html文件中，我只獲得else section（兩次）。

我不知道我出錯的地方。請指教。

來源

2013-03-03 PSathiya

您的模板和幫手都很好。你使用它們的方式：

Handlebars.compile($('#status').html())(obj).appendTo('body')

雖然沒有意義。 Handlebars.compile返回一個函數，調用該函數產生一個字符串;這意味着你實際上appendTo看起來是這樣的：

var tmpl = Handlebars.compile($('#status').html()); // Okay 
var html = tmpl(obj);        // Okay 
html.appendTo('body');        // Broken.

字符串沒有appendTo方法。你可以換一個$()串繞：

$(
    Handlebars.compile($('#status').html())(obj) 
).appendTo('body');

還是一步一步來，使代碼更清晰：

var tmpl = Handlebars.compile($('#status').html()); 
$('body').append(tmpl(obj));

演示：http://jsfiddle.net/ambiguous/46sfd/

來源

2013-03-03 18:47:35

遺憾。打字錯誤。在我的代碼中追加之前，我已經在'$（）'中包裝了字符串。當我在這裏編輯時忘了。該模板編譯良好，並附着到身體沒有任何問題。雖然 – PSathiya 2013-03-03 19:21:35

我不明白什麼是沒有意義的，但從'registerhelper'返回對我來說沒有任何意義。如果'status'是''INITIATED''，那麼你會得到* Close *，* Submit *和* Delete *按鈕，否則你只能得到* Close *;這正是代碼所說的以及它的作用。也許如果你的問題包含真正的可運行代碼，我可以告訴你你做錯了什麼。 – 2013-03-03 19:28:59

我的真實模板大約有40行。我不想粘貼整個事情。我在模板中生成twitter bootstrap模態。上面的一個通常放在模態頁腳中。不過，你是對的。當上面的模板作爲獨立模板執行時，我會得到預期的輸出。但是，當我把它放在bootstrap的模態頁腳中，並且如果我通過傳遞10個對象來運行模板，那麼我只能得到它們中的關閉按鈕。對不起再次在這裏粘貼整個事情。沒想到這個問題可能與我使用模態有關。 – PSathiya 2013-03-04 07:12:02

在車把模板自定義條件

回答

相關問題