artTemplate的使用總結

来源:http://www.cnblogs.com/zhiyushushi/archive/2017/12/13/8035291.html
-Advertisement-
Play Games

1.首先先要下載artTemplate.js,這個可以在官網下載也可以在GitHob進行下載。 2.現在是編寫一個存放html標簽的編寫模板,使用<script type="text/html" id="site_template"></script>裝載,裡面的id是你到時候將確認將數據傳給誰的綁 ...


1.首先先要下載artTemplate.js,這個可以在官網下載也可以在GitHob進行下載。

2.現在是編寫一個存放html標簽的編寫模板,使用<script type="text/html" id="site_template"></script>裝載,裡面的id是你到時候將確認將數據傳給誰的綁定,詳情請看下麵代碼

<script type="text/html" id="site_template"> {{each list as value i}} <div class="content"> <div class="message flex"> <span>{{value.conactName}}</span> <span>{{value.conactphone}}</span> </div> <p>{{value.address}}{{value.addressInfo}}</p> </div> {{/each}} </script> 註:這個時候要說了編寫模板的話有簡潔語法和原聲語法,我這裡用的就是簡潔語法,然後我自己也比較推薦使用,他相對原聲語法的話比較簡單也利於實用 原聲語法就這總:     <%if (potics){%>     <%include('potics_content')%>     <%for (var i=0;i<list.length;i++) {%>     <div><%=i%>. <%=list[i].content%></div>     <%}%>     <%}%> 相當於就是把你所要用的原聲js拿<%%>包起來而已

3.然後就是渲染模板,下放代碼只是模仿的數據,如果小伙伴的數據是從後臺獲取上來就把你從ajax獲取的data數據換上就好啦

var data = { title: '你好', list: ['士力架', '糖葫蘆', '草', '土', '牛肉', '雞', '鴨'] }; var html = template('site_template', data);//這個就是用來連接編寫模板和渲染模板的 document.getElementById('wrap').innerHTML = html;//而這個是把連接好的html和數據傳到你想要把html放在的哪個標簽裡面   然後artTemplate的大概使用就介紹到這裡了
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一.動態規劃原理<!--?xml version="1.0" encoding="UTF-8"?--> 多階段決策問題中,各個階段採取的決策,一般來說是與時間有關的,決策依賴於當前狀態,又隨即引起狀態的轉移,一個決策序列就是在變化的狀態中產生出來的,故有“動態”的含義,稱這種解決多階段決策最優化問題 ...
  • jQuery 的動畫方法(animate)支持各種屬性的過渡,但是預設並不支持色彩的過渡,該插件正是來補足這一點! PS: 該插件支持 RGBA 顏色的過渡,但是請註意,IE8以下的版本不支持 RGBA 顏色。 color backgroundColor borderColor borderBott ...
  • 眾所周知,JavaScript預設採用 進行編碼,允許使用 形式表示一個字元,其中 是字元的Unicode碼點。ES6擴展了unicode的表示 1.字元串新增方法 String.codePointAt(index):正確處理4個位元組存儲的字元,返回一個字元的碼點; String.fromCodeP ...
  • [1]迭代器實現 [2]迭代器分類 [3]迭代類數組 [4]倒序迭代器 [5]中止迭代器 [6]文件上傳 ...
  • 今天把用ionic做一個案例,和ionic示例項目差不多,只是用requirejs分離了controller,但是一直報錯 Error: [ng:areq] Argument ‘AppCtrl’ is not a function, got undefined 經過一番折騰還是沒能解決。後來我細分析 ...
  • 除法不可用手工演算法來計算,其基本思想是反覆做減法,看從被除數裡面最多能減去多少個除數,商就是多少。 除法函數: 如果前者絕對值小於後者直接返回零 做減法時,不需要一個一個減,可以以除數*10^n為基數來減 如果喜歡我的文章,可以掃描二維碼關註我的微信公眾號 爭取每天都分享一點我自己的開發和練習體驗~ ...
  • 用到一些封裝好的運動函數,主要是定時器 效果為圖片和圖片的描述定時自動更換 commom.js tween.js ...
  • mvc/mvvm "阮大神博客" mvc 分為三層,其實M層是數據模型層,它是真正的後端數據在前端js中的一個映射模型,他們的關係是:數據模型層和視圖層有映射關係,model改變,view展示也會更改,當view產生用戶操作或會反饋給controller,controller更改model,這個時候 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...