Wednesday, September 24, 2014

EmberJS, How to create a simple modal component

EmberJS фрэймворк ашиглахын нэг давуу тал гэвэл W3C-ийн web components ийг эртнээс шууд ашиглах боломжтойд юм. Modal гэдэг бол popup шиг гарч ирдэг нэг view бөгөөд энэ дотор форм, санал асуулга, audio video гээд дурын элемэнтүүдээ байрлуулж болно. EmberJS-ийн хувьд modal component-ийг хэрхэн үүсгэж ашиглахыг жишээ кодоор үзүүлье.



Хамгийн эхлээд тухайн компонентийг харуулах уу үгүй юу гэдгийг илэрхийлсэн isShowQuestion гэсэн boolean хувьсагч бүхий controller үүсгэе.
import Ember from 'ember';

export default Ember.ObjectController.extend({
 isShowQuestion : false,
 actions: {
  toggleModal: function() {
   this.toggleProperty('isShowQuestion');
  }
 }
});


Controller-ийнхоо template дээр компонентийг дуудах товч бүхий элемэнтүүд оруулъя
<button {{action 'toggleModal'}} class="btn btn-primary">Add Question</button><br>
{{add-question isShow=isShowQuestion}}


Харин одоо add-question нэртэй компонентийнхоо логикийг агуулсан class үүсгэе. default-аар компонентийн template-д үүсгэх div дээр modal гэсэн css класс мөн data-backdrop="static" data-keyboar="false" байхаар оноон тохируулъя. Энэ нь яаж байгаа вэ гэхээр modal-ийн гадна дарах эсвэл esc товч дарахад modal хаагдахаас сэргийлж байгаа юм. Зөвхөн компонентийн template дотроос л тухайн modal-ийг хаах эсэхийг шийдэх хэрэгтэй учир нь isShow=isShowQuestion гэсэн хоёр хувьсагчдад two-way data binding үүсгэсэн байгаа. Хэрэв үгүй гэвэл component-ийнхээ гадна дарах үзэгдлийг олж мэдэж байгаад isShow хувьсагчдаа false утга оноож болох юм.
import Ember from 'ember';

export default Ember.Component.extend({
 isShow : false,
 classNames : ['modal'],
 attributeBindings: ['data-backdrop', 'data-keyboard'],
 'data-backdrop': "static",
 'data-keyword' : 'false',
 isShowObserver: function() {
  if (this.get('isShow')) {
   this.$().modal('show');
  } else {
   this.$().modal('hide');
  }
 }.observes('isShow'),
 actions: {
  closeModal: function() {
   this.$().modal('hide');
   this.toggleProperty('isShow');
  }
 }
});


Харин одоо компонентийнхээ template-ийг үүсгэх хэрэгтэй. Компонент үүсэхдээ default-аар div авч үүсэх бөгөөд эх биед нь bootstrap-ийн modal үүсгэхэд шаардлагатай div-үүдийг тохируулан үүсгэе.
<div class="modal-dialog modal-sm">
 <div class="modal-content">
  HELLO IM THE MODAL<br>
  <button {{action 'closeModal'}}>close</button>
 </div>
</div>

Үр дүнд хамгийн хялбар modal цонх үүснэ. Цаашаагаа хүсвэл ember-data объектээр компонентээ feed хийгээд дурын дизайнтайгаар өгөгдлөө рэндэрлэж бас янз бүрийн persistent logic хийлгүүлэх боломжтой.
Ember modal component