Meteor - Mẫu

Mẫu sao băng đang sử dụng ba thẻ cấp cao nhất. Hai đầu tiên làheadbody. Các thẻ này thực hiện các chức năng tương tự như trong HTML thông thường. Thẻ thứ ba làtemplate. Đây là nơi chúng tôi kết nối HTML với JavaScript.

Mẫu đơn giản

Ví dụ sau cho thấy cách này hoạt động. Chúng tôi đang tạo một mẫu vớiname = "myParagraph"thuộc tính. Của chúng tôitemplate thẻ được tạo bên dưới body, tuy nhiên, chúng ta cần bao gồm nó trước khi nó được hiển thị trên màn hình. Chúng ta có thể làm điều đó bằng cách sử dụng{{> myParagraph}}cú pháp. Trong mẫu của chúng tôi, chúng tôi đang sử dụng dấu ngoặc nhọn kép({{text}}). Đây là ngôn ngữ mẫu sao băng được gọi làSpacebars.

Trong tệp JavaScript của chúng tôi, chúng tôi đang thiết lập Template.myParagraph.helpers({})phương pháp sẽ là kết nối của chúng tôi với mẫu của chúng tôi. Chúng tôi chỉ đang sử dụngtext trợ giúp trong ví dụ này.

meteorApp.html

<head>
   <title>meteorApp</title>
</head>
 
<body>
   <h1>Header</h1>
   {{> myParagraph}}
</body>
 
<template name = "myParagraph">
   <p>{{text}}</p>
</template>

meteorApp.js

if (Meteor.isClient) {
   
   // This code only runs on the client
   Template.myParagraph.helpers({
      text: 'This is paragraph...'
   });
}

Sau khi chúng tôi lưu các thay đổi, sau đây sẽ là kết quả:

Mẫu khối

Trong ví dụ sau, chúng tôi đang sử dụng {{#each paragraphs}} lặp lại paragraphs mảng và mẫu trả về name = "paragraph" cho mỗi giá trị.

meteorApp.html

<head>
   <title>meteorApp</title>
</head>
 
<body>
   <div>
      {{#each paragraphs}}
         {{> paragraph}}
      {{/each}}
   </div>
</body>
 
<template name = "paragraph">
   <p>{{text}}</p>
</template>

Chúng ta cần tạo paragraphsngười giúp đỡ. Đây sẽ là một mảng có năm giá trị văn bản.

meteorApp.js

if (Meteor.isClient) {
   
   // This code only runs on the client
   Template.body.helpers({
      paragraphs: [
         { text: "This is paragraph 1..." },
         { text: "This is paragraph 2..." },
         { text: "This is paragraph 3..." },
         { text: "This is paragraph 4..." },
         { text: "This is paragraph 5..." }
      ]
   });
}

Bây giờ, chúng ta có thể thấy năm đoạn văn trên màn hình.