在链接上添加其他属性(Adding Additional Attributes on a Link)
优质
小牛编辑
126浏览
2023-12-01
您可以在链接到帮助程序的帮助下在link-to上添加其他属性。
语法 (Syntax)
{{link-to 'link-text' 'route-name' class = "btn-primary"}}
例子 (Example)
该示例显示如何在链接上添加其他属性。 创建名称为info的路由,并打开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');
});
export default Router;
使用以下代码打开在app/templates/下创建的application.hbs文件 -
//Adding the additional attributes on a link as class = "btn btn-primary"
{{link-to 'Click For Fruits List' 'info' class = "btn btn-primary"}}
{{outlet}}
当您单击“Click For Fruits List”链接时,页面应打开info.hbs文件,其中包含以下代码 -
<p>Some Fruits</p>
<ul>
<li>Orange</li>
<li>Banana</li>
</ul>
{{outlet}}
输出 (Output)
运行ember服务器; 你会收到以下输出 -
接下来,单击Click For Fruits List,它将显示模板文件中的以下文本 -