Embeer.js RouteInfoWithAttributes name用法及代碼示例

Ember.js 是一個開源 JavaScript 框架，用於開發基於 Model-View-Controller (MVC) 架構的大型客戶端 Web 應用程序。 Ember.js是使用最廣泛的前端應用框架之一。它的目的是加速開發並提高生產力。目前，它被大量網站使用，包括 Square、Discourse、Groupon、Linked In、Live Nation、Twitch 和 Chipotle。

RouteInfoWithAttributes 類的 name 屬性表示路由的名稱。當前路由的名稱屬性由this.currentroute對象表示。

用法:

object.name

Parameters: 它不需要任何參數。

Returns: 它返回當前路由的名稱。

安裝和運行 Ember.js 的步驟：

步驟 1：要運行以下示例，您需要有一個 ember 項目。要創建一個，您需要先安裝ember-cli。在終端中寫入以下代碼：

npm install ember-cli

第 2 步：現在，您可以通過輸入以下代碼來創建項目：

ember new <project-name> --lang en

要啟動服務器，請鍵入：

ember serve

示例 1：鍵入以下代碼以生成本示例的路由：

ember generate route second

應用程序/組件/to.js

Javascript


import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
export default class MyComponent extends Component {
    @service router;
    get currentRouteName() {
        var currentRoute = this.router.currentRoute;
         
         // Returns the name of the current route
        return currentRoute.name;
    }
}

應用程序/組件/to.hbs

Javascript


<div>
    <h1>GeeksforGeeks</h1>
     <p>Current routes: {{this.currentRouteName}}</p>
</div>

應用程序/模板/second.hbs

HTML


{{page-title "RouteInfoWithAttributes"}}
<Th></Th>
{{outlet}}

輸出：

輸出1

示例 2：鍵入以下代碼以生成本示例的路由：

ember generate route first

應用程序/組件/Th.js

Javascript


import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
export default class MyComponent extends Component {
    @service router;
    get currentRouteName() {
        var currentRoute = this.router.currentRoute;
         
        // Returns the name of the current route
        return currentRoute.name; 
    }
    get parentRouteName() {
        var currentRouteInfo = this.router.currentRoute;
        var parentRouteInfo = currentRouteInfo.parent;
         
        // Returns the name of the parent route, if any
        return parentRouteInfo ? parentRouteInfo.name : null; 
    }
}

應用程序/組件/Th.hbs

HTML


<div>
    <h1>GeeksforGeeks</h1>
    {{#if this.parentRouteName}}
    <p>Parent route: {{this.parentRouteName}}</p>
    {{/if}}
    {{#if this.currentRouteName}}
    <p>Current routes: {{this.currentRouteName}}</p>
    {{/if}}
</div>

應用程序/模板/first.hbs

HTML


{{page-title "RouteInfoWithAttributes"}}
<Th></Th>
{{outlet}}

輸出：

輸出2

參考：https://api.emberjs.com/ember/4.9/classes/RouteInfoWithAttributes/properties/name?anchor=name

相關用法

注：本文由純淨天空篩選整理自satyam00so大神的英文原創作品 Ember.js RouteInfoWithAttributes name Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。