如何使用内置的功能小胡子模板

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>