<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                企業??AI智能體構建引擎,智能編排和調試,一鍵部署,支持知識庫和私有化部署方案 廣告
                --- title: 模板 slug: templates date: 0003/01/01 number: 3 points: 1 contents: 學習關于 Meteor 的模板語言:Spacebars | 創建三個模板 | 學習 Meteor 如何處理控制 | 通過靜態數據建立一個基本原型 paragraphs: 46 --- 為了更容易地進入 Meteor 的開發,我們將采用從外向內的方法來搭建項目。換句話說,我們將首先建立一個 HTML/JavaScript 的外殼,然后把它放到我們的項目里,內部細節處理稍后再說。 這意味著,在本章中,我們只關注 `/client` 目錄里面的事情。 讓我們先在 `/client` 目錄中創建一個文件 `main.html`,并寫入以下代碼: ~~~html <head> <title>Microscope</title> </head> <body> <div class="container"> <header class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="/">Microscope</a> </div> </header> <div id="main"> {{> postsList}} </div> </div> </body> ~~~ <%= caption "client/main.html" %> 這是我們的 App 的主要模板。在上面我們看到很多熟悉的 HTML 標簽,除了這個 `{{> postsList}}` 標簽,它是 `postsList` 模板的插入點,等一下我們就會說到。現在,先讓我們創建更多的模板吧。 ### Meteor 模板 我們項目的核心是社會新聞網站,它是由一系列的帖子所組成的,而這正是我們要使用模板的原因。 我們先在 `/client` 里面創建一個目錄 `/templates`。這里用來存放所有的模板,這樣可以保持項目結構的清晰整潔,接著在 `/templates` 里面再創建 `/posts` 目錄,用來存放與帖子相關的模板。 <% note do %> ### 查找文件 Meteor 的強大之處在于文件的查找。無論你把代碼文件放在 `/client` 目錄下的任何地方,Meteor 都可以找到并且正確地進行編譯。這意味著你永遠都不需要手動編寫 JavaScript 或 CSS 文件的調用路徑。 這也意味著,你可能會把所有的文件放在同一目錄中,甚至所有的代碼放在同一個文件里。但由于 Meteor 會把一切的代碼都編譯到一個壓縮的文件里面,因此我們更偏向于把項目布置得井井有條,使用更整潔的文件結構,提高項目的可讀性。 <% end %> 接下來,我們開始創建第二個模板。在 `client/templates/posts` 目錄中,創建 `posts_list.html`: ~~~html <template name="postsList"> <div class="posts"> {{#each posts}} {{> postItem}} {{/each}} </div> </template> ~~~ <%= caption "client/templates/posts/posts_list.html" %> 和 `post_item.html` : ~~~html <template name="postItem"> <div class="post"> <div class="post-content"> <h3><a href="{{url}}">{{title}}</a><span>{{domain}}</span></h3> </div> </div> </template> ~~~ <%= caption "client/templates/posts/post_item.html" %> 注意模板的 `name="postsList"` 屬性,它的作用是告訴 Meteor 去根據這個名稱跟蹤這個模板的位置。(注意,與實際文件的文件名不相關。) 現在介紹 Meteor 的模板系統 **Spacebars**。Spacebar 就是簡單的 HTML 加上三件事情:*Inclusion* (有時也稱作 “partial”)、*Expression* 和 *Block Helper*。 *Inclusion* :通過 `{{> templateName}}` 標記,簡單直接地告訴 Meteor 這部分需要用相同名稱的模板來取代(在我們的例子中就是 `postItem` )。 *Expression* :比如 `{{title}}` 標記,它要么是調用當前對象的屬性,要么就是對應到當前模板管理器中定義的 helper 方法,并返回其方法值(后面會詳細討論)。 *Block Helper* :在模板中控制流程的特殊標簽,如 `{{#each}}…{{/each}}` 或 `{{#if}}…{{/if}}` 。 <% note do %> ### 進一步學習 你如果想了解更多關于 Spacebars 的內容,可以參考 [Spacebars 文檔](https://github.com/meteor/meteor/blob/devel/packages/spacebars/README.md)。 <% end %> 有了這些知識,我們就可以很容易理解上面的內容了。 首先,在 `postsList` 模板里,我們通過 `{{#each}}…{{/each}}` Block Helper 遍歷 `posts` 對象。然后,每次迭代包含了 `postItem` 模板。 這個 `posts` 對象來自哪里?好問題。它實際上是一個 **模板 helper**,你可以想象它是動態值的占位符(placeholder)。 `postItem` 這個模板本身相當簡單。它只使用三個標簽: `{{url}}` 和 `{{title}}` 都返回其集合的屬性,而 `{{domain}}` 則調用模板對應的 helper 方法。 ### 模板 Helper 到目前為止我們已經學會了使用 Spacebars ,這只是在 HTML 的基礎上多加了幾個標簽而已。不像其他語言如 PHP (甚至常規 HTML 頁面,還包含了 JavaScript), Meteor 只是讓模板和邏輯進行分離,而這些模板本身并不需要做很多復雜的事情。 為了讓連接變得更流暢,一個模板需要 **helper**。你可以想象這些 helper 就是廚師用食材(你的數據)烹飪好佳肴(模板),再由服務員端到你面前。 換句話說,模板的作用僅限于顯示或循環變量,而 helper 則扮演著一個相當重要的角色:把值分配給每個變量。 <% note do %> ### Contoller 控制器? 我們也許會情不自禁地認為,包含所有模板 helper 的文件是一個 controller(控制器)。但這是很模糊的,因為 controller (至少在 MVC 情況下)通常有不同的作用。 所以我們決定遠離那個術語,在談論關于模板涉及的 JavaScript 代碼時,就簡單地稱為 “模板的 helper” 或 “模板的邏輯”。 <% end %> 為簡單起見,我們將采用與模板同名的方式來命名包含其 helper 的文件,區別是擴展名為 **.js**。好了,我們馬上在 `/client/templates/posts` 目錄中創建 `posts_list.js` 文件,開始構建我們的第一個 helper: ~~~js var postsData = [ { title: 'Introducing Telescope', url: 'http://sachagreif.com/introducing-telescope/' }, { title: 'Meteor', url: 'http://meteor.com' }, { title: 'The Meteor Book', url: 'http://themeteorbook.com' } ]; Template.postsList.helpers({ posts: postsData }); ~~~ <%= caption "client/templates/posts/posts_list.js" %> 如果運行正確,你現在應該在瀏覽器中看到這樣的畫面: <%= screenshot "3-1", "我們的第一個帶靜態數據的模板" %> 我們剛剛在做兩件事情。首先,我們放置一些虛擬的基本數據到 `postsData` 數組中。原本數據應該是來自數據庫的,但是由于我們還沒有學習到該怎么做(在下一章揭曉),所以我們先通過使用靜態數據來“作弊”。 然后,我們使用的是 Meteor 的 `Template.postsList.helpers()` 函數,建立了 `posts` 模板 helper 來返回剛剛定義的 `postsData` 數組。 如果你記得,現在我們在 `postsList` 模板中使用這個 `posts` helper: ~~~html <template name="postsList"> <div class="posts"> {{#each posts}} {{> postItem}} {{/each}} </div> </template> ~~~ <%= caption "client/templates/posts/posts_list.html" %> 定義 `posts` helper 就是讓我們的模板可以使用它,所以模板就可以遍歷 `postsData` 數組并將里面的每個對象發送到 `postItem` 模板中。 <%= commit "3-1", "添加了基本的 post 列表模板和靜態數據。" %> ### 關于 `domain` Helper 類似地,我們現在創建一個 `post_item.js` 文件來包含 `postItem` 模板的邏輯: ~~~js Template.postItem.helpers({ domain: function() { var a = document.createElement('a'); a.href = this.url; return a.hostname; } }); ~~~ <%= caption "client/templates/posts/post_item.js" %> 這一次, `domain` helper 的值不再是一個數組,而是一個匿名函數。相比起我們之前簡化的虛擬數據的例子,這種模式更為常見(而且更有用)。 <%= screenshot "3-2", "顯示每個鏈接的域名。" %> 這個 `domain` helper 方法通過 JavaScript 來獲取一個 URL 地址并返回其域名。但是它一開始是從哪里獲得 URL 地址的呢? 為了回答這個問題,我們需要回到 `posts_list.html` 模板。`{{#each}}` 代碼塊不僅遍歷數組,它還在**代碼塊范圍內將 `this` 的值賦予被遍歷的對象**。 這意味著,在 `{{#each}}` 標記之間,每個 post 都可以通過 `this` 依次訪問,并且一直延伸到模板 helper(`post_item.js`)中。 我們現在明白了為什么 `this.url` 會返回當前 post 的 URL。而且,如果我們在 `post_item.html` 模板里面使用 `{{title}}` 和 `{{url}}`,Meteor 就會知道需要調用 `this.title` 和 `this.url` 返回我們想要的正確值。 <%= commit "3-2", "設置 `postItem` 的 `domain` helper。" %> <% note do %> ### 神奇的 JavaScript 盡管這對于 Meteor 來說并不特別,這里會簡單解釋一下上面 “神奇的 JavaScript 代碼”。首先,我們創建一個空的錨(`a`)HTML 標簽并儲存在內存中。 然后我們將其 `href` 屬性設置為當前 post 的 URL (正如我們剛剛講到的,`this` 在 helper 中正是當前被操作的對象)。 最后,我們利用 `a` 標簽的特別屬性 `hostname` 返回 URL 的域名。 <% end %> 如果你正確地緊跟著我們的進度,這時候你就會在瀏覽器中看到一個 post 列表。但是這個列表只是調用了靜態數據,它沒有利用到 Meteor 實時性的特點。我們將在下一章向你展示該如何修改! <% note do %> ### 動態代碼重載 你可能已經注意到,當你修改文件的時候,不需要手動刷新頁面,瀏覽器就會自動重新加載。 這是因為 Meteor 跟蹤了項目目錄下的所有文件,當檢測到其中一個文件發生了改變,它就會自動刷新瀏覽器。 Meteor 的動態代碼重載是相當智能的,它甚至可以在兩個刷新動作之間保存 App 的狀態。 <% end %>
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看