Embeer.js RouterService mergedProperties用法及代碼示例

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

mergedProperties 是有助於將子類屬性值與 ember 類的超類屬性值合並的屬性。

用法:

mergedProperties

Parameters: 它不需要任何參數。

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

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

npm install ember-cli

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

ember new <project-name> --lang en

要啟動服務器，請鍵入：

ember serve

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

ember generate route demo1

應用程序/路線/demo1.js

Javascript


import Route from '@ember/routing/route';
import EmberObject from '@ember/object';
import ObjectProxy from '@ember/object/proxy';
const Employee = ObjectProxy.extend({
    mergedProperties: ['language'],
    language: {
        1: 'Hindi',
    },
});
export default class DetailsRoute extends Route {
    person;
    createPerson() {
        let person = Employee.create({
            name: 'Aayush Sahu',
            age: 26,
            mobile: '9876542819',
            country: 'India',
            language: ['Tamil'],
            salary: 53000,
            gender: 'M',
            zipCode: '800020',
        });
        return person;
    }
    model() {
        this.person = this.createPerson();
        console.log(this.person);
        return this.person;
    }
    setupController(controller, model) {
        super.setupController(controller, model);
        controller.set('person', this.person);
    }
}

應用程序/模板/demo1.js

HTML


{{page-title "mergedProperties"}}
<table>
    <h1>Person</h1>
    <div><b>Name:</b> {{this.person.name}}</div>
    <div><b>Gender:</b> {{this.person.gender}}</div>
    <div><b>Salary:</b> {{this.person.salary}}</div>
    <div><b>Zip Code:</b> {{this.person.zipCode}}</div>
    <div><b>Mobile:</b> {{this.person.mobile}}</div>
    <div><b>Country:</b> {{this.person.country}}</div>
    <div><b>Age:</b> {{this.person.age}}</div>
    <div><b>Language speak:</b>
        {{#each-in this.person.language as |key value|}}
        <li>{{value}}</li>
        {{/each-in}}
    </div>
</table>
{{outlet}}

輸出：

合並屬性輸出1

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

ember generate route demo2

應用程序/路線/demo2.js

Javascript


import Route from '@ember/routing/route';
import EmberObject from '@ember/object';
import ObjectProxy from '@ember/object/proxy';
const Student = EmberObject.extend({
    mergedProperties: ['Id'],
    Id: {
        Aadhar_card: ['8976-4251-9826'],
        School_id: ['12345654'],
    },
});
export default class StudentsRoute extends Route {
    student;
    createStudent() {
        let student = Student.extend({
            name: 'Pokhraj Verma',
            gender: 'M',
            class: 8,
            grade: 'A',
            marks: 87,
            Id: {
                School_id: ['16171819'],
            },
        });
        return student.create();
    }
    model() {
        this.student = this.createStudent();
        return this.student.get('mergedProperty');
    }
    setupController(controller, model) {
        super.setupController(controller, model);
        controller.set('student', this.student);
    }
}

應用程序/模板/demo2.js

HTML


{{page-title "mergedProperties"}}
<table>
    <h1>Details:</h1>
    <div><b>Name:</b> {{this.student.name}}</div>
    <div><b>Gender:</b> {{this.student.gender}}</div>
    <div><b>Class:</b> {{this.student.class}}</div>
    <div><b>Grade:</b> {{this.student.grade}}</div>
    <div><b>Marks:</b> {{this.student.marks}}</div>
    <div><b>Id_Cards:</b> </div>
    <table>{{#each-in this.student.Id as |key value|}}
        <li>{{key}}: {{value}}</li>
        {{/each-in}}
    </table>
</table>
{{outlet}}

輸出：

合並屬性輸出2

參考：https://api.emberjs.com/ember/4.6/classes/RouterService/properties/mergedProperties?anchor=mergedProperties

相關用法

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