Üçüncü Taraf Entegrasyonu

Üçüncü taraf kütüphanelerle veya saf JavaScript koduyla entegrasyon, yaşam döngüsü yöntemleri aracılığıyla sağlanır.

noUiSlider Örneği

/** NoUiSlider sarmalayıcı bileşeni */
function Slider() {
  var slider;

  return {
    oncreate: function (vnode) {
      // Üçüncü taraf kütüphanesi burada başlatılır
      slider = noUiSlider.create(vnode.dom, {
        start: 0,
        range: { min: 0, max: 100 },
      });
      slider.on('update', function (values) {
        vnode.attrs.onChange(values[0]);
        m.redraw();
      });
    },
    onremove: function () {
      // Bileşen kaldırıldığında üçüncü taraf kütüphanesini temizle
      slider.destroy();
    },
    view: function () {
      return m('div');
    },
  };
}

/** Demo uygulama bileşeni */
function Demo() {
  var showSlider = false;
  var value = 0;

  return {
    view: function () {
      return m(
        '.app',
        m(
          'p',
          m(
            'button',
            {
              type: 'button',
              onclick: function () {
                showSlider = !showSlider;
              },
            },
            showSlider ? 'Kaydırıcıyı Gizle' : 'Kaydırıcıyı Oluştur'
          )
        ),
        showSlider &&
          m(Slider, {
            onChange: function (v) {
              value = v;
            },
          }),
        m('p', value)
      );
    },
  };
}

m.mount(document.body, Demo);

Canlı Demo

Bootstrap FullCalendar Örneği

/** FullCalendar sarmalayıcı bileşeni */
var FullCalendar = {
  oncreate: function (vnode) {
    console.log('FullCalendar::oncreate');
    $(vnode.dom).fullCalendar({
      // Başlangıç ayarlarınızı ve geri çağırma (callback) fonksiyonlarınızı buraya ekleyin
    });
  },
  onremove: function (vnode) {
    // Temizleme işlemlerini burada gerçekleştirin.
    $(vnode.dom).fullCalendar('destroy');
  },
  view: function (vnode) {
    return m('div');
  },
};

/** Demo uygulama bileşeni */
function Demo() {
  var fullCalendarEl;

  function next() {
    $(fullCalendarEl).fullCalendar('next');
  }

  function prev() {
    $(fullCalendarEl).fullCalendar('prev');
  }

  return {
    view: function (vnode) {
      return [
        m('h1', 'Takvim'),
        m(FullCalendar, {
          oncreate: function (vnode) {
            fullCalendarEl = vnode.dom;
          },
        }),
        m(
          'button',
          {
            onclick: prev,
          },
          'Mithril.js Düğmesi - Önceki Ay'
        ),
        m(
          'button',
          {
            onclick: next,
          },
          'Mithril.js Düğmesi - Sonraki Ay'
        ),
      ];
    },
  };
}

m.mount(document.body, Demo);

Canlı Demo