【轉載】Asp.Net中使用基於jQuery的javascript前臺模版引擎JTemplate

来源:https://www.cnblogs.com/xu-yi/archive/2019/03/28/10618312.html
-Advertisement-
Play Games

JTemplate是基於jQuery的開源的前端模版引擎,在Jtemplate模板中可以使用if判斷、foreach迴圈、for迴圈等操作,使用Jtemplate模板優點在於ajax局部刷新界面時候不必要拼接html語句、可以通過ajax獲取JSON格式的數據、在模版中允許使用javascript代 ...


JTemplate是基於jQuery的開源的前端模版引擎,在Jtemplate模板中可以使用if判斷、foreach迴圈、for迴圈等操作,使用Jtemplate模板優點在於ajax局部刷新界面時候不必要拼接html語句、可以通過ajax獲取JSON格式的數據、在模版中允許使用javascript代碼、允許你創建串接模版、允許你在模版中創建參數、即時刷新,自動從伺服器端獲取更新內容。

一、 jTemplate常用的標簽有:

1、template      模版標簽
2、if  .. elseif .. else .. /if   條件語句
3、foreach .. else .. /for        迴圈
4、for .. else .. /for      迴圈
5、continue, break          繼續或中斷

二、jTemplates的語法:

(1)if語法

{#if |COND|}..{#elseif |COND|}..{#else}..{#/if} 
#if 示例:
 {#if $T.hello} hello world. {#/if}

 {#if 2*8==16} good {#else} fail {#/if} 

{#if $T.age>=18)} 成人了 {#else} 未成年 {#/if}

 {#if $T.list_id == 3} System list {#elseif $T.list_id == 4} Users List {#elseif $T.list_id == 5} Errors list {#/if}

(2)for語法

{#for |VAR| = |CODE| to |CODE| [step=|CODE|]}..{#else}..{#/for}

示例:
預設步長:{#for index = 1 to 10} {$T.index} {#/for} 
正向步長:{#for index = 1 to 10 step=3} {$T.index} {#/for}
 負向步長及空迴圈:{#for index = 1 to 10 step=-3} {$T.index} {#else} nothing {#/for} 
也可以在迴圈中使用變數:{#for index = $T.start to $T.end step=$T.step} {$T.index} {#/for} 
說明:{#else}是在{#for...}未能執行的時的輸出內容。

(3)foreach語法

{#foreach |VAR| as |NAME| [begin=|CODE|] [count=|CODE|] [step=|CODE|]}..{#else}..{#/for}

示例:
預設:{#foreach $T.table as record} {$T.record.name} {#/for}
指定起始位置:{#foreach $T.table as record begin=1} {$T.record.name} {#/for} 
指定起始和迴圈次數:{#foreach $T.table as record begin=1 count=2} {$T.record.name} {#/for} 
指定步長:{#foreach $T.table as record step=2} {$T.record.name} {#/for}

三、Jtemplate模板使用方法如下:

<div id="result"></div>  
    <textarea id="template_1" style="display: none;">  
       <table>  
         <tr>  
           <th></th>  
          </tr>  
         {#foreach $T as record}  
         <tr>  
           <td>{$T.record.屬性名}</td>  
         </tr>  
        {#/for}  
       </table>  
    </textarea>  


綁定數據以及調用語句中關鍵的2句:

$('#result').setTemplateElement('template_1');  //設置模版  
$('#result').processTemplate(data);   //執行數據 

 

備註:原文轉載自Asp.Net中使用基於jQuery的javascript前臺模版引擎JTemplate_IT技術小趣屋

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前言: 在我們的日常生活中,常常能看見時間。如:在我們的手機里,在一些網站上也能隨處看到時間。那我們在項目的開發中,也常常涉及到時間的處理,對於我們經常會遇到和處理的問題。Java中專門為我們處理時間提供了一個重要的類 Calendar。 一、如何運用Calendar類呢? 如果想要取得時間,首先使 ...
  • 題目: 對任何一個正整數 n,如果它是偶數,那麼把它砍掉一半;如果它是奇數,那麼把 (3n+1) 砍掉一半。 當我們驗證卡拉茲猜想的時候,為了避免重覆計算,可以記錄下遞推過程中遇到的每一個數。例如對 n=3 進行驗證的時候,我們需要計算 3、5、8、4、2、1,則當我們對 n=5、8、4、2 進行驗 ...
  • 目錄 Spring 概述 依賴註入 Spring beans Spring註解 Spring數據訪問 Spring面向切麵編程(AOP) Spring MVC Spring 概述 1. 什麼是spring? Spring 是個java企業級應用的開源開發框架。Spring主要用來開發Java應用,但 ...
  • 【BUG回顧】 在學習Python爬蟲時,運Pycharm中的文件出現了這樣的報錯: bs4.FeatureNotFound: Couldn’t find a tree builder with the features you requested: lxml. 也就是說lxml用不了,因此使用An ...
  • 在Sqlsever資料庫中,有時候操作資料庫過程中會進行鎖表操作,在鎖表操作的過程中,有時候會出現死鎖的情況出現,這時候可以使用SQL語句來查詢資料庫死鎖情況,主要通過系統資料庫Master資料庫來查詢,涉及到的系統數據表有dm_exec_requests、dm_exec_sessions、dm_e ...
  • 在DSAPI中,可以通過簡單的代碼調用串口選擇界面,當用戶選擇了其中一個串口時,將返回選擇的串口名稱(或序號)。 也可以在選擇界面加入“關閉串口”的項,用戶選擇該項時,返回字元“關閉串口”。適用於已經打開了某個串口,額外讓用戶決定是否關閉已經打開的串口。 重載 ...
  • 1.匿名方法和Lambda表達式中可以訪問到聲明該匿名方法或Lambda表達式所在方法中的參數或局部變數,這些變數稱為外部變數(Outer Variable),外部變數的生命周期會持續到引用匿名方法或Lambda表達式的委托實例被垃圾回收器回收為止: 2.調用匿名方法或Lambda表達式時,訪問到的 ...
  • 在Sqlserver資料庫中,DATEPART() 函數用於返回日期/時間的單獨部分,比如年、月、日、小時、分鐘等等。DatePart()函數的語法為: DATEPART(datepart,date)。可以通過DatePart函數來返回單獨返回日期時間的年、月、日、該時間所在的季度、該時間是一年當中 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...