將表達爲小寫字母和破折號的把手

Question

我試圖重複使用前端的handlebars模板中的部分數據。

爲此，我需要將我的一個表達式轉換爲小寫，並使用破折號而不是空格。這很容易完成嗎？

例如，在我的JSON文件我有以下幾點：

var items = [{ 
    id: '1', 
    title: "Item Number One", 
}, 

{ 
    id: '2', 
    title: "Item Number Two", 
}, 

]; 

上，而在前端的Handbars模板，我想這樣做：

<script type="text/x-handlebars" id="items"> 

    <h1> 
     {{title}} 
    </h1> 

    <img src="{{unbound title}}.png" /> 

</script> 

這將輸出圖片頁面爲<img src="Item Number One.png" />，這是不好的。那麼有沒有簡單的方法將其轉換爲小寫，並刪除空格？

Answer 1

你可以映射你的項目數組和模板應用到修改後的數組，像這樣：

var items = [ 

{ 
    id: '1', 
    title: "Item Number One", 
}, 

{ 
    id: '2', 
    title: "Item Number Two", 
}, 

]; 

items = items.map(function(el) { 
    el.title = el.title.toLowerCase().replace(/\s+/g, '-'); 
    return el; 
}); 

// items = [{id:"1",title:"item-number-one"},{id:"2",title:"item-number-two"}] 

如果您需要保留原始數組只是映射的陣列分配給不同的變量。

Answer 2

創建自定義把手助手：

Handlebars.registerHelper("noSpaces", function(input) { 
    var output = input.toLowerCase(); 
    return output.replace(" ", ""); 
}); 

然後調用它爲：

<img src="{{noSpaces title}}.png" />