npm 包 ember-cli-htmlbars 使用教程

Ember.js 是一个流行的 JavaScript 框架，被用于开发单页应用程序（SPA）。在 Ember.js 中，HTML 是使用 "handlebars" 模板语言来渲染的。"handlebars" 模板引擎本质上是用于生成 HTML，因此需要一个专门的 npm 包来帮助我们实现与 HTML 集成。

本文将介绍一个名为 "ember-cli-htmlbars" 的 npm 包，它是一个 Ember.js 插件，可以帮助我们轻松地将 HTML 与 Ember.js 集成。

安装

要安装 "ember-cli-htmlbars"，我们可以在拥有 Node.js 和 npm 的前提下使用以下命令安装：

npm install --save-dev ember-cli-htmlbars

安装完成后，在主机系统上执行一个名为 "ember-cli" 的命令。空框架模板现在可以替换成一个具有 HTMLBars 支持的模板。

HTMLBars 支持

"ember-cli-htmlbars" 提供了两个 HTML 显示层级：

单文件组件

单文件组件是一个文件，其中包含 HTML 模板和相关的 JavaScript 控制器。这些组件使用 ".hbs" 扩展名。

// app/templates/index.hbs
<h1>{{title}}</h1>
<p>{{body}}</p>

块文件组件

块文件组件是一个文件，其中包含 HTML 模板和相关的 JavaScript 控制器。这些组件使用 ".hbs" 扩展名。

// app/templates/components/my-component.hbs
<div class="my-component">{{yield}}</div>

其中 {{yield}} 是一个占位符，它表示 Ember.js 在运行时将根据子节点渲染代码块中的内容。我们可以使用此语法来为具有常见父子结构的 HTML 元素创建组件。

组件

为自定义组件指定名称：

import Component from '@ember/component';
import layout from '../templates/components/my-custom-component.hbs';

export default Component.extend ({
  layout
});

这个示例展示了如何将 "ember-cli-htmlbars" 的模板文件与 JavaScript 组件文件相关联。在这里，我们通过导入模板文件并将其指定为组件的 "layout" 属性来实现它。

使用单文件组件：

// app/templates/index.hbs
<MyCustomComponent @title="My Title" @body="My Body Text" />

使用块文件组件：

// app/templates/application.hbs
{{#my-custom-component}}
  My Title
  <br />
  My Body Text
{{/my-custom-component}}

子组件嵌套

您甚至可以在块文件组件中嵌套子组件。

// app/templates/components/my-custom-component.hbs
<div class="my-custom-component">
  {{yield}}
  {{my-nested-component}}
</div>

嵌套组件在 Ember.js 中非常常见，因此这进一步说明了 "ember-cli-htmlbars" 的强大。

直接访问

"ember-cli-htmlbars" 与其他 npm 包一样，因此我们可以利用 Ember.js 的手动引入功能，并将其作为脚本标记在我们的 HTML 文档中。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60710