Meteor-模板 - 芒果文档

📌 相关文章

📜 Meteor-模板

📅 最后修改于: 2020-12-08 05:19:24 🧑 作者: Mango

流星模板正在使用三个顶级标签。前两个是头部和身体。这些标记执行与常规HTML相同的功能。第三个标签是template 。这是我们将HTML连接到JavaScript的地方。

简单模板

以下示例显示了它是如何工作的。我们正在创建一个名称=“ myParagraph”属性的模板。我们的模板标签是在body元素下方创建的，但是，我们需要先将其包括在屏幕上。我们可以使用{{> myParagraph}}语法来做到这一点。在我们的模板中，我们使用双花括号({{text}}) 。这是流星模板语言，称为Spacebars 。

在我们的JavaScript文件中，我们正在设置Template.myParagraph.helpers({})方法，这将是我们与模板的连接。在此示例中，我们仅使用文本帮助器。

meteorApp.html

meteorApp

 

   Header
   {{> myParagraph}}

meteorApp.js

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

保存更改后，将是输出-

流星模板输出

块模板

在下面的示例中，我们使用{{#each每个段落}}遍历段落数组，并为每个值返回模板名称=“ paragraph” 。

meteorApp.html

meteorApp

 

   
      {{#each paragraphs}}
         {{> paragraph}}
      {{/each}}

我们需要创建段落助手。这将是具有五个文本值的数组。

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..." }
      ]
   });
}

现在，我们可以在屏幕上看到五个段落。

流星模板输出2