Mustache.js使用筆記(內容屬于轉載總結)

1、Mustache的語法很簡單,用兩個大括號標記要綁定的字段即可,“{{}}”
Mustache主要的渲染方法為Mustache.render(),該方法有兩個參數,第一個為要渲染的模版,
也就是例子中的template,第二個就是數據源也就是例子中的user對象
例:

$(function () {
var user = { name: "Olive", age: 23, sex: "girl" };
var template = "My name is {{name}} ,I'm {{age}} ,Sex is {{sex}}";
var view = Mustache.render(template, user);
$("#user_info").html(view);
})

?


2、view最終的結果是My name is Olive ,I'm 23 ,Sex is girl;
3、對象數組循環渲染展示

var users = { result: [
{ name: "Only", age: 24, sex: "boy" },
{ name: "for", age: 24, sex: "boy" },
{ name: "Olive", age: 23, sex: "girl" }
]};
var template = "<div><table cellpadding=0 cellspacing=0 class='tb' ><tr><td>Name</td><td>Age</td><td>Sex</td></tr>{{#result}}<tr><td>{{name}}</td><td>{{age}}</td><td>{{sex}}</td></tr>{{/result}}</table><div>";
var views = Mustache.render(template, users);
$("#users_info").html(views);

?


(1)對于對象數據Mustache也有其特殊的語法:{{#}}{{/}},如果所給定的數據源是一個對象數組,
則可以使用該語法,很方便的用來循環展示。
{{#}}{{/}}還有另外的一層意思就是判斷是否為空,如果{{#}}中的值為null或false或undefined則其標記內的內容不展現。
有了判空的方法當然還有與之相反的方法{{^}},該方法表示的意思與{{#}}意思相反。
(2) 其中{{#}}標記表示從該標記以后的內容全部都要循環展示
{{/}}標記表示循環結束。這種情況多用于table行的展示。
注:在某些時候,我們要綁定的數據源中可能會有一些html標記,如果單純的采用{{}}這種方式來綁定的話,默認的會將html標記轉義。
為了解決防止綁定字段中的內容被轉移我們可以這樣做{{&}},這樣就可以防止轉義。

參考網址:http://blog.csdn.net/xuemoyao/article/details/17896203

轉載于:https://www.cnblogs.com/dongxiaolei/p/5834021.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/286409.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/286409.shtml
英文地址,請注明出處:http://en.pswp.cn/news/286409.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

MAUI 自定義繪圖入門

在2022的5月份&#xff0c;某軟正式發布了 MAUI 跨平臺 UI 框架。我本來想著趁六一兒童節放假來寫幾篇關于 MAUI 入門的博客&#xff0c;可惜發現我不擅長寫很入門的博客。再加上 MAUI 似乎是為了趕發布日期而發布&#xff0c;只能勉強說能開發了&#xff0c;能用了。于是我就來…

C語言試題五之計算并輸出給定數組(長度為9)中每相鄰兩個元素之平均值的平方根之和

??個人主頁:個人主頁 ??系列專欄:C語言試題200例目錄 ??推薦一款刷算法、筆試、面經、拿大公司offer神器 ?? 點擊跳轉進入網站 ?作者簡介:大家好,我是碼莎拉蒂,CSDN博客專家(全站排名Top 50),阿里云博客專家、51CTO博客專家、華為云享專家 1、題目 請編寫函數…

【三維激光掃描】實驗02:StonexSiScan新建項目、加載點云數據

文章目錄 1. 新建工程2. 打開工程3. 加載點云1. 新建工程 打開StonexSiScan點云后處理軟件,點擊【新建】按鈕。 選擇工程存放路徑,輸入工程名稱。 2. 打開工程 點擊【打開】按鈕。

eBPF 在云原生環境中的應用

端午假期&#xff0c;我翻譯了 OReilly 的報告《什么是 eBPF》&#xff0c;其中我覺得第五章「云原生環境中的 eBPF」解答了我心中的很多疑惑&#xff0c;比較不錯&#xff0c;分享給大家。下面是第五章譯文。《什么是 eBPF》中文版封面近年來&#xff0c;云原生應用已呈指數級…

使用HtmlAgilityPack抓取網頁數據

XPath路徑表達式&#xff0c;主要是對XML文檔中的節點進行搜索&#xff0c;通過XPath表達式可以對XML文檔中的節點位置進行快速定位和訪問&#xff0c;html也是也是一種類似于xml的標記語言&#xff0c;但是語法沒有那么嚴謹&#xff0c;在codeplex里有一個開源項目HtmlAgility…

C語言試題六之使字符串的前導*號不得多于n個;若多于n個,則刪除多于的*號;若少于或等于n個,則什么也不做。字符串中間和尾部的*號不刪除。

??個人主頁:個人主頁 ??系列專欄:C語言試題200例目錄 ??推薦一款刷算法、筆試、面經、拿大公司offer神器 ?? 點擊跳轉進入網站 ?作者簡介:大家好,我是碼莎拉蒂,CSDN博客專家(全站排名Top 50),阿里云博客專家、51CTO博客專家、華為云享專家 1、題目 請編寫函數…

QT坑爹的事..

昨晚用QT寫了個網絡小程序&#xff0c;布局怎么都出不來add->widge()無效&#xff0c;原來因為在QMainWindow的基類下 需要人工添加一個 widge new QWidge() this->setCentralWidget(widget);最后在 widget->setLayout(mainLayout);才行 dialog和widge的基類 則沒有任…

企業有了程序員為什么還要用 低代碼/無代碼

一、備受“爭議”的無代碼/低代碼開發 在看這篇內容時&#xff0c;我們要知道&#xff0c;技術無時無刻不在進行發展&#xff0c;IT技術更是如此&#xff0c;快速的技術更新使得程序員在進行應用開發時效率更高&#xff1b;我記得在十多年前&#xff0c;開發一個普通的 HTML 頁…

【三維激光掃描技術】原理、方法及實驗圖文教程目錄

《三維激光掃描技術》專欄講述目前最先進、最流行的三維激光技術&#xff0c;包括三維激光掃描技術原理&#xff0c;三維測距原理&#xff0c;國內外三維掃描設備&#xff0c;點云特點&#xff0c;三維建模&#xff0c;三維激光優勢、應用領域&#xff0c;應用技術案例等。 文章…

std::thread 不 join

std::thread 構造之后 使用 detach。就可以了

求最長回文串

Given a string S, find the longest palindromic substring in S. You may assume that the maximum length of S is 1000, and there exists one unique longest palindromic substring. 轉載于:https://www.cnblogs.com/yangscode/p/5017527.html

C語言試題七之將函數字符串中的前導*號全部刪除,中間和尾部的*號不刪除。

??個人主頁:個人主頁 ??系列專欄:C語言試題200例目錄 ??推薦一款刷算法、筆試、面經、拿大公司offer神器 ?? 點擊跳轉進入網站 ?作者簡介:大家好,我是碼莎拉蒂,CSDN博客專家(全站排名Top 50),阿里云博客專家、51CTO博客專家、華為云享專家 1、題目 規定輸入字…

Dapr 1.7 之 Unix Domain socket 他來了

Unix Domain socketA UNIX socket is an inter-process communication mechanism that allows bidirectional data exchange between processes running on the same machine.Unix Domain Socket&#xff08;后面統一簡稱 UDS&#xff09;是在socket的框架上發展出一種IPC&…

實訓三(cocos2dx 3.x 打包apk)

上一篇文章《實訓二&#xff08;cocos2dx 2.x 打包apk&#xff09;》簡單的講述的利用cocos2dx 2.x引擎在windows平臺上打包apk的方法與過程&#xff0c;本文將介紹3.x版本引擎&#xff0c;如何打包apk的問題。 首先&#xff0c;Cygwin在3.x版本引擎上已經用不到了&#xff0c;…

學習SQL數據查詢,這一篇就夠了!

【任務概述】 建立數據庫的目的主要是為了對數據庫進行操作,以便能夠從中提取有用的信息,而數據查詢則是數據庫操作的核心。 擴展閱讀:《學習SQL數據更新,這一篇就夠了!》 文章目錄 一、SQL簡單查詢1. Select查詢語句2. 無條件查詢3. 單條件查詢4. 多條件查詢5. 分組查詢6…

網頁精美動效/動畫制作 按鈕鼠標懸浮動效基礎 01《炫彩網頁 iVX 無代碼動效/動畫制作》

編輯器地址&#xff1a;https://editor.ivx.cn/ 一、準備工作 進入編輯頁后&#xff0c;選擇其中一種應用類型創建應用&#xff0c;在此以相對應用作為示例&#xff1a; 創建好應用后在此選擇對應的屏幕作為示例演示&#xff0c;在此選擇電腦屏幕作為對應的大小&#xff1a…

Java并發編程 - Executor,Executors,ExecutorService, CompletionServie,Future,Callable

一、Exectuor框架簡介 Java從1.5版本開始&#xff0c;為簡化多線程并發編程&#xff0c;引入全新的并發編程包:java.util.concurrent及其并發編程框架&#xff08;Executor框架&#xff09;。 Executor框架是指java 5中引入的一系列并發庫中與executor相關的一些功能類&a…

C語言試題八之計算下列級數和,和值由函數值返回 S=1+x+x^2/2! + x^3/3!+…x^n/n!

??個人主頁:個人主頁 ??系列專欄:C語言試題200例目錄 ??推薦一款刷算法、筆試、面經、拿大公司offer神器 ?? 點擊跳轉進入網站 ?作者簡介:大家好,我是碼莎拉蒂,CSDN博客專家(全站排名Top 50),阿里云博客專家、51CTO博客專家、華為云享專家 1、題目 計算下列級…

with管理文件操作

為了避免打開文件后忘記關閉&#xff0c;可以通過管理上下文&#xff0c;即&#xff1a; with open(log,r) as f: f.write(xxxxxx)f.readlines()...................如此方式&#xff0c;當with代碼塊執行完畢時&#xff0c;內部會自動關閉并釋放文件資源。以往我們打開…