Ember controller ашиглах нь

Ember -ын Route, Controller 2 бол яг Бонни Клайд 2 юм.

source: http://mentalfloss.com/article/78096/13-infamous-facts-about-bonnie-and-clyde

Ember дээр Route -тэй салшгүй холбоотой нэг зүйл нь Controller юм. Controller нь route дуудагдах үед render хийгдэх тусгай компонентийн үүрэгтэй. Controller нь route ээс ирэх ганцхан model гэх property авдаг. Ашиглаж үзвэл:

ember g controller controller-name

Энд үүсгэх controller -ын нэр нь route -ын нэртэй таарч байх ёстой. Тэгэхээр манай нөхцөлд өмнө нь API -аас дата авч байгаа хэсгийг бага зэрэг өөрчлөөд user route, мөн user/detail route үүсгэе.

ember g route user
ember g route user/detail

ингээд router.js дээр дараах өөрчлөлтийг оруулна.

import EmberRouter from '@ember/routing/router';
import config from './config/environment';
const Router = EmberRouter.extend({
  location: config.locationType,
  rootURL: config.rootURL
});
Router.map(function() {
  this.route('user', function() {
    this.route('detail', { path:'/:id'}); //detail дээр id авна
  });
});
export default Router;

өмнөх app/routes/index.js route дээр бичсэн хэсгийг app/routes/user/detail.js руу хуулаад

import Route from '@ember/routing/route';
export default Route.extend({
  model() {
    return this.store.findRecord('user', 'zorig') 
  }
});

app/templates/user/detail.hbs дотор дараах хэсгийг хуулж тавина.

<h4>{{model.name}}</h4>
<p>{{model.bio}}</p>
<span>Followers: {{model.followers}}</span>
<span>Following: {{model.following}}</span>

Одоо controller үүсгэе ember g controller user/detail ингэснээр app/controllers/user/detail.js файл үүснэ.

Энд user/detail route-тай адил controller үүсгэж байна.

Харин одоо controller дотор буюу app/controllers/user/detail.js дотор доорхи кодыг бичнэ.

Доор ember -ын toggleProperty ашиглаж boolean утга сольж байна.

import Controller from '@ember/controller';
export default Controller.extend({
  isPictureHide: true,
  actions: {
    togglePicture() {
      this.toggleProperty('isPictureHide');
    }
  }
});

Дараа нь app/templates/user/detail.hbs дээр дараахи өөрчлөлтийг оруулна.

<h4>{{model.name}}</h4>
<p>{{model.bio}}</p>
<span>Followers: {{model.followers}}</span>
<span>Following: {{model.following}}</span>
<!-- зураг харах/нуух товч шинээр нэмнэ -->
{{#if isPictureHide}}
  <div class="image">
    <button {{action 'togglePicture'}}>Зураг</button>
  </div>
{{else}}
<div class="image">
  <button {{action 'togglePicture'}}>Нуух</button><br/>
  <img src="{{model.avatar_url}}" alt="{{model.name}}"/>
</div>
{{/if}}

Ингээд эцэст нь сервер ээ ажиллуулаад( ember s ) localhost:4200/user/zorig хаягруу хандаж үзэхэд доорхи үр дүнг үзүүлнэ.

http://localhost:4200/user/zorig

“Зураг” товчийг дарж үзээрэй. ;)

Эх кодыг github -аас