如何使用內置的功能小鬍子模板

Question

我有一個mustache.js模板

<script id="catagorie_list" type="text/template"> 
    {{#rows}}<li><a href="#">{{catagorie_name}}</a></li>{{/rows}}  
</script> 

它

jQuery的，我想使每個{{catagorie_name}}爲大寫字母的第一個字母。 例如：

india --> India 

australia-->Australia 

這可能嗎？

Answer 1

假設輸入對象：

var countries = { 
    "rows": [ 
    { "catagorie_name": "india" }, 
    { "catagorie_name": "australia" }, 
    { "catagorie_name": "spain" } 
    ] 
}; 

我們追加了一個功能：

var func_var = { 
    "capitalize_name": function() { 
     return firstcap(this.catagorie_name); 
     } 
}; 
jQuery.extend(countries, func_var); // https://stackoverflow.com/a/10384883/1287812 

的capitalization function：

function firstcap(str) { // https://stackoverflow.com/a/11370497/1287812 
    var len = str.length; 
    var re = /^\s$/; 
    var special = true; // signalizes whether previous char is special or not 
    for (var i=0; i<len; i++) { 
    var code = str.charCodeAt(i); 
    if (code>=97 && code<=122 && special) { 
     str = str.substr(0, i) + String.fromCharCode(code-32) + str.substr(i+1); 
     special = false; 
    } 
    else if (re.test(str[i])) { 
     special = true; 
    } 
    } 
    return str; 
} 

最後，模板：

<script id="catagorie_list" type="x-tmpl-mustache"> 
    <ul>{{#rows}}<li><a href="#">{{capitalize_name}}</a></li>{{/rows}}</ul> 
</script> 

Answer 2

使用CSS，你可能要設置這樣一個類你的a標籤

.capitalize {text-transform:capitalize;} 

然後你原來的代碼看起來像

<script id="catagorie_list" type="text/template"> 
    {{#rows}}<li><a class="capitalize" href="#">{{catagorie_name}}</a></li>{{/rows}}  
</script>