当前位置: 首页 > 文档资料 > EmberJS 入门教程 >

使用Link-to作为内联助手(Using Link-to as an Inline Helper)

优质
小牛编辑
125浏览
2023-12-01

您可以通过提供链接文本作为帮助程序的第一个参数,将链接用作内联组件。

语法 (Syntax)

Click for {{#link-to 'link1'}}more info{{/link-to}},
info of {{link-to 'link text' 'link2'}}.

例子 (Example)

下面给出的示例显示了通过指定帮助程序的第一个参数将link-to用作内联组件。 创建两个名称为inforecord路由,并打开router.js文件以定义URL映射 -

import Ember from 'ember';
import config from './config/environment';
const Router = Ember.Router.extend ({
   location: config.locationType,
   rootURL: config.rootURL
});
Router.map(function() {
   this.route('info');
   this.route('record');
});
export default Router;

使用以下代码打开在app/templates/下创建的application.hbs文件 -

Click for the {{#link-to 'info'}}Fruits{{/link-to}} information, for the documentation 
{{link-to 'Click for records''record'}}
{{outlet}}

单击“Fruits”链接时,页面应打开info.hbs文件,其中包含以下代码 -

<p>Some Fruits</p>
<ul>
   <li>Orange</li>
   <li>Banana</li>
</ul>
{{outlet}}

如果单击Click for records链接,页面应打开包含以下代码的record.hbs文件 -

<p>Some Records</p>
<ul>
   <li>Orange.doc</li>
   <li>Banana.doc</li>
</ul>
{{outlet}}

输出 (Output)

运行ember服务器; 你会收到以下输出 -

Ember.js模板内联助手

当您单击info ,它将显示模板文件中的以下文本 -

Ember.js模板内联助手

当您单击Click for records ,它将显示模板文件中的以下文本 -

Ember.js模板内联助手