Ember component ашиглах нь

Single Page Application -ны зайлшгүй дурьдах ёстой зүйл нь компонент билээ. Аппликейшн томрохын хэрээр нэг UI элементийг олон дахин давтах, өөр өөр хуудсанд адилхан UI элемент ашиглах шаардлага гардаг. SPA үүнийг хялбархан шийдсэн нь component юм. Тэгэхээр ember -ын component ашиглах нэг жишээ үзье. Ember generator ашиглан компонент үүсгэе.

source: pexels.com

Ember -ын зөвлөмжийн дагуу компонент нь дундуур зураас ашигласан байх ёстой.

Жич: Уншигч таныг ѳмнѳх ember прожект дотор эсвэл шинээр үүсгэсэн гэж үзээд шууд компонент үүсгэв.

ember g component people-list

Дээрхи команд нь доорхи файлуудыг үүсгэнэ.

installing component
  create app/components/people-list.js
  create app/templates/components/people-list.hbs
installing component-test
  create tests/integration/components/people-list-test.js

Ингээд үүссэн компонент дотроо (components/people-list.js) нэг property үүсгэе.

import Component from '@ember/component';
export default Component.extend({
  list: ['Дамбажаа', 'Сандаг', 'Дулмаа'],
});

Үүсгэсэн компонентийн тэмплэйт(templates/components/people-list.hbs) файлд дараах өөрчлөлтийг оруулна.

<ul>
{{#each list as |person|}}
 <li>
 {{person}}
 </li>
{{/each}}
</ul>

Одоо templates/index.hbs дотор үүсгэсэн компонентоо дуудна. index.hbs дотор өмнөх нийтлэлийн үргэлжлэл бий.

<img src="{{model.avatar_url}}" alt="">
<h1>{{model.name}}</h1>
<h6>{{model.bio}}</h6>
<span>{{model.followers}}</span>
<span>{{model.following}}</span>

{{people-list}}

Ингээд ember s гээд хөтөч өө нээгээд харвал

Нийтлэл таньд таалагдсан бол бусдад түгээгээрэй.