mustache.js基本使用(一)


作者:zccst

模板已是第二次接觸,第一次使用模板記得是在十分系統里渲染頁面時使用,當時已做到熟練使用,但實際上仍不知道原因。

再次學習模板已不是從0開始,所以還算順手,但畢竟還只限於使用,今天繼續學習,希望這次能夠更深入一些。

 

這次學習的是mustache.js,他的理念是讓模板盡量保持簡單,甚至連基本的邏輯判斷都不需要用。

本文基本要點:

1,基本用法

2,使用模板(寫在頁面或異步獲取)

3,集中變量定義

 

官方地址:https://github.com/janl/mustache.js

以下是公共文件

<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="mustache.js"></script>
<script type="text/javascript">
$(function(){

...

});

<div id="target">Loading...</div>
<script id="template" type="x-tmpl-mustache">
  Hello {{ name }}!
</script>


1,最基礎的用法
var template = '{{title}} spends {{calc}}';
    var obj = {
    title: "Joe",
    calc: function () {
        return 2 + 4;
    }
}
var rendered = Mustache.render(template,obj);
$('#target').html(rendered);



2,還可以使用模板
總結:兩個基本素材:template, obj。前者和后者都可以簡單,也可以復雜
Mustache替換:var result = Mustache.render(template, obj);
渲染到頁面:$("xxID").html(result);

var template = $('#template').html();
Mustache.parse(template); // optional, speeds up future uses
var rendered = Mustache.render(template, {name: "Luke"});
$('#target').html(rendered);



3,template除了直接賦值和來自頁面外,還可以異步獲取。
var obj = {};
$.get('template.mst', function(template){
    var result = Mustache.render(template, obj);
    $("xxID").html(result);
});
總結:template有三種來源:
(1)直接字符串
(2)本頁面中帶ID的script
(3)異步獲取

 


4,幾種變量
最基本變量 :{{ company }}
原樣輸出變量:{{{ company }}}或{{ &company }}
嵌套用點變量:{{name.first}} {{name.last}}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM