摘要:在文件中使用模板模板定義三個最高級別的標簽不用寫了,能省則省的模板可以自由的使用標簽比如上面的使用的標簽。在模板中使用邏輯是模板語言,是安全的不會輸出標簽他具有以下常用的語法導入指定的模板循環判斷等詳細的說明可以參考。
新建一個項目Meteor
meteor create meteor-template
會生成三個文件:
meteor-template.css meteor-template.html meteor-template.js
這三個文件就是模板文件,.js文件是邏輯和數據控制文件,.css文件是樣式文件。
訪問.html文件會自動加載.js和.css文件。
Meteor模板定義三個最高級別的標簽
meteor-study I am Meteor!
{{> meteor_study}}{{templateName}}
{{#each languages}}{{name}}
{{/each}}
不用寫了,能省則省!
Meteor的模板可以自由的使用html標簽比如上面的使用的標簽。
{{}}是模板語言,是安全的不會輸出html標簽
他具有以下常用的語法:
{{> meteor_study}}導入指定的模板
{{#each langages}} {{/each}}循環
{{#if done}}done{{else}}notdone{{/if}} if判斷
等...
詳細的說明可以參考。
在MVC的模式中可以在Controller層給View層賦值,在Meteor中也可以在.js文件中給模板賦值:
if (Meteor.isClient) { Template.meteor_study.helpers({ templateName:"Meteor Study", languages:[{name:"Node"},{name:"Meteor"},{name:"html"},{name:"css"}] }); }
其中Meteor.isClient這句話判斷是不是在客戶端,在客戶端就使用Template.meteor_study.helpers 給模板變量賦值。使用templateName和languages分別定義了一個字符串和一個數組。
使用css.css文件負責控制樣式,在meteor-template.css添加代碼:
body { font-family: sans-serif; background-color: #315481; background-image: linear-gradient(to bottom, #315481, #918e82 100%); background-attachment: fixed; position: absolute; top: 10px; bottom: 0; left: 10px; right: 0; padding: 0; margin: 0; font-size: 14px; } header { background: #d2edf4; background-image: linear-gradient(to bottom, #d0edf5, #e1e5f0 100%); padding: 20px 15px 15px 15px; position: relative; } h1 { font-size: 1.5em; margin: 0; margin-bottom: 10px; display: inline-block; margin-right: 1em; }
最終顯示的效果:
代碼地址:https://github.com/jjz/meteor...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/18779.html
摘要:當一個應用啟動時,會自動加載這些庫,為應用提供了一個基礎環境。也就是說,模板文件只能包含以這三種標簽為頂層標簽的片段。在中,我們需要判斷當前的具體運行環境,以便執行相應的代碼。 一、全棧開發平臺 - 不僅僅是前端 Meteor和那些名聲如雷貫耳的前端框架,比如Angular, React等都不一樣,它是一個 采用單一開發語言的全棧開發的平臺:開發者可以使用JavaScript同時 進...
摘要:在我的機子上,運行于端口,以避免和其他默認運行于端口的沖突。我們可以使用命令連接數據庫查看定義應用層次創建的模板應用有一個問題,客戶端和服務器段的代碼是一樣的。在中加入然后添加問題模板注意我們使用了來確保用戶未登錄的情況下應用。 編者注:我們發現了有趣的一系列文章《30天學習30種新技術》,正在翻譯中,一天一篇更新,年終禮包。下面是第15天的內容。 到目前為止我們討論了Bower...
摘要:在我的機子上,運行于端口,以避免和其他默認運行于端口的沖突。我們可以使用命令連接數據庫查看定義應用層次創建的模板應用有一個問題,客戶端和服務器段的代碼是一樣的。在中加入然后添加問題模板注意我們使用了來確保用戶未登錄的情況下應用。 編者注:我們發現了有趣的一系列文章《30天學習30種新技術》,正在翻譯中,一天一篇更新,年終禮包。下面是第15天的內容。 到目前為止我們討論了Bower...
摘要:與此同時,服務器在后臺更新。這種調整稱為延遲補償,向用戶提供了更高的認知速度。網站地址安裝運行命令新建項目使用可以創建一個新項目運行運行可以直接運行項目在瀏覽器中輸入就可以看到一個網頁 Meteor是什么 Meteor是一種最新的JavaScript框架,用于自動化和簡化實時運行的Web應用程序的開發,它使用分布式數據協議-(Distributed Data Protocol,DDP)...
摘要:中的在中時時刻刻都不能離開,表單提交來看看在里面如何提交表單吧首先是這里我們定義了一個表單,為,有一個的還有一個提交的按鈕。 Meteor中的form 在web中時時刻刻都不能離開form,表單提交,來看看在meteor里面如何提交表單吧!首先是 HTML: meteor-form form Welcome t...
閱讀 3054·2023-04-26 00:40
閱讀 2391·2021-09-27 13:47
閱讀 4197·2021-09-07 10:22
閱讀 2966·2021-09-06 15:02
閱讀 3307·2021-09-04 16:45
閱讀 2484·2021-08-11 10:23
閱讀 3599·2021-07-26 23:38
閱讀 2900·2019-08-30 15:54