v0.2.x'ten Geçiş

Eğer geçiş yapıyorsanız, v1.x ve v2.x büyük ölçüde v0.2.x ile API uyumluluğuna sahiptir, ancak bazı uyumsuz değişiklikler bulunmaktadır. v2.x'e geçiş neredeyse aynıdır, bu nedenle aşağıdaki notlar çoğunlukla her ikisi için de geçerlidir.

Geçişinizi kolaylaştırmak için mithril-codemods aracını kullanarak en basit geçişleri otomatik hale getirebilirsiniz.

`m.prop` kaldırıldı

v2.x'te m.prop() artık daha güçlü bir akış mikro-kütüphanesine dönüştürüldü, ancak artık çekirdek kütüphanenin bir parçası değildir. İsteğe bağlı Streams modülünü belgelerde nasıl kullanacağınız hakkında bilgi edinebilirsiniz.

v0.2.x

javascript

var m = require('mithril');

var num = m.prop(1);

v2.x

javascript

var m = require('mithril');
var prop = require('mithril/stream');

var num = prop(1);
var doubled = num.map(function (n) {
  return n * 2;
});

`m.component` kaldırıldı

v0.2.x'te bileşenler m(Component) veya m.component(Component) kullanılarak oluşturulabiliyordu. v2.x sadece m(Component)'i desteklemektedir.

v0.2.x

javascript

// Bunlar eşdeğerdir
m.component(Component);
m(Component);

v2.x

javascript

m(Component);

`m.withAttr` kaldırıldı

v0.2.x'te olay işleyicileri oninput: m.withAttr("value", func) şeklinde kullanılabiliyordu. v2.x'te, değeri doğrudan olayın hedefinden okumanız gerekir. m.prop ile iyi bir sinerji oluşturuyordu, ancak bu çekirdek dışı bir çözüm lehine kaldırıldığından ve v1.x benzer geniş, deyimsel akış kullanımını görmediğinden, m.withAttr kullanışlılığının çoğunu kaybetti.

v0.2.x

javascript

var value = m.prop('');

// View katmanında
m('input[type=text]', {
  value: value(),
  oninput: m.withAttr('value', value),
});

v2.x

javascript

var value = '';

// View katmanında
m('input[type=text]', {
  value: value,
  oninput: function (ev) {
    value = ev.target.value;
  },
});

`m.version` kaldırıldı

Genel olarak çok az işe yarıyordu ve her zaman kendiniz geri ekleyebilirsiniz. Hangi özelliklerin mevcut olduğunu bilmek için özellik algılamayı tercih etmelisiniz ve v2.x API'si bunu daha iyi sağlamak için tasarlanmıştır.

`config` fonksiyonu

v0.2.x'te Mithril.js tek bir yaşam döngüsü metodu olan config'i sağlıyordu. v2.x, bir vnode'un yaşam döngüsü üzerinde çok daha ayrıntılı kontrol sağlar.

v0.2.x

javascript

m('div', {
  config: function (element, isInitialized) {
    // her yeniden çizim sırasında çalışır
    // isInitialized, düğümün DOM'a eklenip eklenmediğini temsil eden bir boolean değeridir
  },
});

v2.x

Bu yeni metotlar hakkında daha fazla dokümantasyon lifecycle-methods.md adresinde mevcuttur.

javascript

m('div', {
  // DOM düğümü oluşturulmadan önce çağrılır
  oninit: function (vnode) {
    /*...*/
  },
  // DOM düğümü oluşturulduktan sonra çağrılır
  oncreate: function (vnode) {
    /*...*/
  },
  // Düğüm güncellenmeden önce çağrılır, iptal etmek için false döndürün
  onbeforeupdate: function (vnode, old) {
    /*...*/
  },
  // Düğüm güncellendikten sonra çağrılır
  onupdate: function (vnode) {
    /*...*/
  },
  // Düğüm kaldırılmadan önce çağrılır, DOM'dan kaldırılmaya hazır olduğunda çözümlenen bir Promise döndürün
  onbeforeremove: function (vnode) {
    /*...*/
  },
  // Düğüm kaldırılmadan önce, ancak onbeforeremove done() çağırdıktan sonra çağrılır
  onremove: function (vnode) {
    /*...*/
  },
});

Mevcutsa, vnode'un DOM-Element'ine vnode.dom üzerinden erişilebilir.

Yeniden çizim davranışındaki değişiklikler

Mithril.js'nin render motoru hala yarı otomatik global yeniden çizimler temelinde çalışır, ancak bazı API'ler ve davranışlar farklılık gösterir:

Artık yeniden çizim kilitleri yok

v0.2.x'te Mithril.js, geçici olarak engellenen çizim mantığını durduran 'yeniden çizim kilitlerine' izin veriyordu: varsayılan olarak, m.request yürütme sırasında çizim döngüsünü kilitler ve bekleyen tüm istekler çözüldüğünde kilidi açardı - aynı davranış m.startComputation() ve m.endComputation() kullanılarak manuel olarak çağrılabilirdi. İkinci API'ler ve ilişkili davranış, v2.x'te değiştirilmeden kaldırılmıştır. Yeniden çizim kilitleme, hatalı UI'lara yol açabilir: uygulamanın bir bölümünün, görünümün değişimi yansıtacak şekilde güncellenmesini engellemesine izin verilmemelidir.

Olay işleyicilerinden yeniden çizimi iptal etme

m.mount() ve m.route(), bir DOM olay işleyicisi çalıştıktan sonra otomatik olarak yeniden çizmeye devam eder. Bu yeniden çizimleri olay işleyicilerinizden iptal etmek artık, olay nesnesindeki redraw özelliğini false olarak ayarlayarak yapılır.

v0.2.x

javascript

m('div', {
  onclick: function (e) {
    m.redraw.strategy('none');
  },
});

v2.x

javascript

m('div', {
  onclick: function (e) {
    e.redraw = false;
  },
});

Senkron yeniden çizim değiştirildi

v0.2.x'te, m.redraw()'a doğru (truthy) bir değer geçirerek Mithril.js'yi hemen yeniden çizmeye zorlamak mümkündü. v2.x'te, bu işlevsellik açıklık sağlamak için iki farklı metoda ayrılmıştır.

v0.2.x

javascript

m.redraw(true); // redraws immediately & synchronously

v2.x

javascript

m.redraw(); // bir sonraki requestAnimationFrame tick'inde bir yeniden çizim planlar
m.redraw.sync(); // hemen bir yeniden çizim çağırır ve tamamlanmasını bekler

`m.startComputation`/`m.endComputation` kaldırıldı

Bunlar anti-pattern olarak kabul edilir ve bir dizi sorunlu uç duruma sahiptir, bu nedenle v2.x'te değiştirilmeden kaldırılmıştır.

Bileşen `controller` fonksiyonu

v2.x'te, bileşenlerde artık controller özelliği yok - bunun yerine oninit kullanın.

v0.2.x

javascript

m.mount(document.body, {
  controller: function () {
    var ctrl = this;

    ctrl.fooga = 1;
  },

  view: function (ctrl) {
    return m('p', ctrl.fooga);
  },
});

v2.x

javascript

m.mount(document.body, {
  oninit: function (vnode) {
    vnode.state.fooga = 1;
  },

  view: function (vnode) {
    return m('p', vnode.state.fooga);
  },
});

// VEYA

m.mount(document.body, {
  // bu varsayılan olarak vnode.state'e bağlıdır
  oninit: function (vnode) {
    this.fooga = 1;
  },

  view: function (vnode) {
    return m('p', this.fooga);
  },
});

Bileşen argümanları

v2.x'te bir bileşene geçirilen argümanlar bir nesne olmalıdır, String/Number/Boolean gibi basit değerler metin çocukları olarak kabul edilecektir. Argümanlara, vnode.attrs nesnesinden okunarak bileşen içinde erişilir.

v0.2.x

javascript

var Component = {
  controller: function (options) {
    // options.fooga === 1
  },

  view: function (ctrl, options) {
    // options.fooga === 1
  },
};

m('div', m.component(Component, { fooga: 1 }));

v2.x

javascript

var Component = {
  oninit: function (vnode) {
    // vnode.attrs.fooga === 1
  },

  view: function (vnode) {
    // vnode.attrs.fooga === 1
  },
};

m('div', m(Component, { fooga: 1 }));

Bileşen vnode çocukları

v0.2.x'te, bileşen vnode çocukları normalleştirilmemiştir, sadece ekstra argümanlar olarak geçirilmişlerdi ve düzleştirilmemişlerdi. (Dahili olarak, sadece kısmen uygulanan bir bileşen döndürüyordu ve bu bileşen kısmen uygulanmasına göre farklılaştırılıyordu.) v2.x'te, bileşen vnode çocukları, çözümlenmiş bir çocuk dizisi olarak vnode.children aracılığıyla geçirilir, ancak v0.2.x gibi, bireysel çocuklar kendileri normalleştirilmez ve çocuk dizisi de düzleştirilmez.

v0.2.x

javascript

var Component = {
  controller: function (value, renderProp) {
    // value === "value"
    // typeof renderProp === "function"
  },

  view: function (ctrl, value, renderProp) {
    // value === "value"
    // typeof renderProp === "function"
  },
};

m(
  'div',
  m.component(Component, 'value', function (key) {
    return 'child';
  })
);

v2.x

javascript

var Component = {
  oninit: function (vnode) {
    // vnode.children[0] === "value"
    // typeof vnode.children[1] === "function"
  },

  view: function (vnode) {
    // vnode.children[0] === "value"
    // typeof vnode.children[1] === "function"
  },
};

m(
  'div',
  m(Component, 'value', function (key) {
    return 'child';
  })
);

DOM vnode öğeleri

v0.2.x'te, DOM düğümlerinin çocukları, yalnızca tek bir dizi çocuğu varsa doğrudan çocukları kullanmak dışında, hiçbir normalleştirme olmadan tam anlamıyla temsil ediliyordu. Dizeler tam anlamıyla temsil edildiği için daha çok buna benzer bir yapı döndürüyordu.

javascript

m("div", "value", ["nested"])

// Becomes:
{
	tag: "div",
	attrs: {},
	children: [
		"value",
		["nested"],
	]
}

v2.x'te, DOM vnode'larının çocukları tek bir tutarlı yapının nesnelerine normalleştirilir.

javascript

m("div", "value", ["nested"])

// Becomes roughly:
{
	tag: "div",
	attrs: null,
	children: [
		{tag: "#", children: "value"},
		{tag: "[", children: [
			{tag: "#", children: "nested"},
		]},
	]
}

Bir DOM vnode'unda yalnızca tek bir metin çocuğu varsa, bunun yerine text özelliği bu değere ayarlanır.

javascript

m("div", "value")

// Becomes roughly:
{
	tag: "div",
	attrs: null,
	text: "",
	children: undefined,
}

v2.x vnode yapısı ve işlerin nasıl normalleştirildiği hakkında daha fazla ayrıntı için vnode belgelerine bakın.

Keyler

v0.2.x'te, key'li ve key'siz vnode'ları serbestçe karıştırabilirsiniz.

v2.x'te, hem fragment'lerin hem de element'lerin çocuk listeleri ya tamamen key'li ya da tamamen key'siz olmalıdır. Boşluklar da bu kontrolün amaçları doğrultusunda key'siz olarak kabul edilir - artık onları yok sayılmaz.

Bundan kaçınmanız gerekiyorsa, tek bir vnode içeren bir fragment ifadesi kullanın, örneğin [m("div", {key: whatever})].

`view()` parametreleri

v0.2.x'te görünüm fonksiyonlarına controller örneğine ve (isteğe bağlı olarak) bileşene geçirilen herhangi bir seçeneğe bir referans geçirilir. v2.x'te, controller fonksiyonu gibi yalnızca vnode geçirilir.

v0.2.x

javascript

m.mount(document.body, {
  controller: function () {},

  view: function (ctrl, options) {
    // ...
  },
});

v2.x

javascript

m.mount(document.body, {
  oninit: function (vnode) {
    // ...
  },

  view: function (vnode) {
    // ctrl yerine vnode.state'i kullanın
    // options yerine vnode.attrs'ı kullanın
  },
});

`m()`'e bileşenleri geçirme

v0.2.x'te, herhangi bir sarma işlemi gerektirmeden bileşenleri m()'in ikinci argümanı olarak geçirebilirsiniz. v2.x'te tutarlılığa yardımcı olmak için, her zaman bir m() çağrısıyla sarılmaları gerekir.

v0.2.x

javascript

m('div', Component);

v2.x

javascript

m('div', m(Component));

`m.mount()` ve `m.route()`'a vnode'lar geçirme

v0.2.x'te, m.mount(element, component), bileşenler yerine ikinci argüman olarak vnode'lara tolerans gösteriyordu (belgelenmemiş olsa bile). Benzer şekilde, m.route(element, defaultRoute, routes), routes nesnesindeki değerler olarak vnode'ları kabul ediyordu.

v2.x'te, her iki durumda da bileşenler gereklidir.

v0.2.x

javascript

m.mount(element, m('i', 'hello'));
m.mount(element, m(Component, attrs));

m.route(element, '/', {
  '/': m('b', 'bye'),
});

v2.x

javascript

m.mount(element, {
  view: function () {
    return m('i', 'hello');
  },
});
m.mount(element, {
  view: function () {
    return m(Component, attrs);
  },
});

m.route(element, '/', {
  '/': {
    view: function () {
      return m('b', 'bye');
    },
  },
});

`m.route.mode`

v0.2.x sürümlerinde, yönlendirme modu m.route.mode değişkenine "pathname", "hash" veya "search" değerlerinden biri atanarak belirleniyordu. v1.x'te bu, m.route.prefix = prefix ile değiştirildi; burada prefix herhangi bir önek olabilir. # ile başlayanlar "hash" modunda, ? ile başlayanlar "search" modunda, diğer karakterler veya boş dizeler ise "pathname" modunda çalışır. Ayrıca m.route.prefix = "/path/#!" ya da ?# gibi yukarıdakilerin kombinasyonları da desteklenir.

Varsayılan değer, sadece # yerine #! (hashbang) önekini kullanacak şekilde değiştirildi. Bu nedenle, varsayılan davranışı kullanıyorsanız ve mevcut URL'lerinizi korumak istiyorsanız, rotaları başlatmadan önce m.route.prefix = "#" belirtin.

v0.2.x

javascript

m.route.mode = 'hash';
m.route.mode = 'pathname';
m.route.mode = 'search';

v2.x

javascript

// Doğrudan karşılıkları:
m.route.prefix = '#';
m.route.prefix = '';
m.route.prefix = '?';

`m.route()` ve anchor etiketleri

Yönlendirilebilir bağlantılar artık bir özellik (attribute) yerine özel, yerleşik bir bileşen kullanılarak işleniyor. Eğer bunu <button> gibi öğelerde kullanıyorsanız, selector: "button" özelliği kullanarak bu etiket adını belirtebilirsiniz.

v0.2.x

javascript

// Bu bağlantıya tıklandığında, gezinmek yerine "/path" rotası yüklenecek
m('a', {
  href: '/path',
  config: m.route,
});

v2.x

javascript

// Bu bağlantıya tıklandığında, gezinmek yerine "/path" rotası yüklenecek
m(m.route.Link, {
  href: '/path',
});

Yol şablonları

v1.x'te, benzer olmalarına rağmen ayrı tasarlanmış sözdizimleri ve farklı uygulamaları olan üç ayrı yol şablonu sözdizimi vardı. Bunlar yeterince açık tanımlanmamıştı ve parametreler genellikle escape edilmiyordu. Artık :key kullanıldığında değerler otomatik olarak kodlanır, :key... kullanıldığında ise ham (raw) olarak bırakılır. Eğer bir şeyler beklenmedik şekilde kodlanmışsa, :path... kullanın. Bu kadar basit.

Somut olarak, bunun her yöntemi nasıl etkilediği aşağıda açıklanmıştır:

`m.request` URL'leri

v2.x'teki yol bileşenleri, enterpolasyon yapıldığında otomatik olarak escape edilir ve değerlerini params'tan okurlar. v0.2.x'te, m.request({url: "/user/:name/photos/:id", data: {name: "a/b", id: "c/d"}}) isteği /user/a%2Fb/photos/c/d olarak ayarlanan URL ile gönderilirdi. v2.x'te, karşılık gelen m.request({url: "/user/:name/photos/:id", params: {name: "a/b", id: "c/d"}}) isteği /user/a%2Fb/photos/c%2Fd adresine gönderilir. Eğer bir anahtarı escape etmeden enterpole etmek istiyorsanız, :key... kullanın.

/api/search?q=:query gibi doğrudan sorgu dizelerindeki enterpolasyonlar v2.x'te gerçekleştirilmez. Bunları sorgu dizesinde belirtmeden, uygun anahtar adlarıyla params aracılığıyla geçirin.

Bunun m.jsonp için de geçerli olduğunu unutmayın. m.request + dataType: "jsonp"'den m.jsonp'ye geçerken, bunun da farkında olmanız gerekir.

`m.route(route, params, shouldReplaceHistoryEntry)` yolları

Bunlar artık enterpolasyonlara izin veriyor ve m.request'inkiyle aynı şekilde çalışıyorlar.

`m.route` rota kalıpları

:key... biçimindeki yol anahtarları, v1.x'te URL'si çözülmüş olarak dönerken, v2.x'te işlenmemiş URL'yi döndürür.

Önceden, :key.md gibi ifadeler hatalı bir şekilde kabul ediliyordu ve sonuçtaki parametrenin değeri keymd: "..." olarak ayarlanıyordu. Artık durum böyle değil - .md artık kalıbın bir parçası, adın değil.

Geçerli rotayı okuma/yazma

v0.2.x sürümlerinde, geçerli rotayla ilgili tüm işlemler m.route() fonksiyonu üzerinden yapılıyordu. v2.x'te bu, iki fonksiyona ayrıldı.

v0.2.x

javascript

// Geçerli rotayı alma
m.route();

// Yeni bir rota ayarlama
m.route('/other/route');

v2.x

javascript

// Geçerli rotayı alma
m.route.get();

// Yeni bir rota ayarlama
m.route.set('/other/route');

Rota parametrelerine erişme

Bu API v2.x'te de kullanılabilir. Ayrıca, rota parametreleri vnode üzerindeki attrs nesnesine özellik olarak aktarılır.

v0.2.x

javascript

m.route(document.body, '/booga', {
  '/:attr': {
    controller: function () {
      m.route.param('attr'); // "booga"
    },
    view: function () {
      m.route.param('attr'); // "booga"
    },
  },
});

v2.x

javascript

m.route(document.body, '/booga', {
  '/:attr': {
    oninit: function (vnode) {
      vnode.attrs.attr; // "booga"
      m.route.param('attr'); // "booga"
    },
    view: function (vnode) {
      vnode.attrs.attr; // "booga"
      m.route.param('attr'); // "booga"
    },
  },
});

Sorgu dizeleri oluşturma/ayrıştırma

v0.2.x sürümlerinde m.route.buildQueryString() ve m.route.parseQueryString() yöntemleri m.route nesnesine bağlıydı. v2.x'te bunlar ayrıldı ve kök m'ye taşındı.

v0.2.x

javascript

var qs = m.route.buildQueryString({ a: 1 });

var obj = m.route.parseQueryString('a=1');

v2.x

javascript

var qs = m.buildQueryString({ a: 1 });

var obj = m.parseQueryString('a=1');

Ayrıca, v2.x'te {key: undefined}, m.buildQueryString ve onu kullanan m.request gibi yöntemler tarafından key=undefined olarak serileştirilir. v0.2.x'te anahtar atlanırdı ve bu m.request'e aktarılırdı. Eğer bu duruma bağlı bir kodunuz varsa, nesnedeki undefined değerlere sahip anahtarları tamamen kaldıracak şekilde kodunuzu güncelleyin. Bunu kolayca yapamıyorsanız ve v0.2.x davranışını korumanız gerekiyorsa, değerleri undefined olan bir nesneden tüm anahtarları temizlemek için basit bir yardımcı program kullanmaya değer olabilir.

javascript

// Bir nesneden `undefined` parametrelerini atlamanız gerektiğinde çağırın.
function omitUndefineds(object) {
  var result = {};

  for (var key in object) {
    if ({}.hasOwnProperty.call(object, key)) {
      var value = object[key];
      if (Array.isArray(value)) {
        result[key] = value.map(omitUndefineds);
      } else if (value != null && typeof value === 'object') {
        result[key] = omitUndefineds(value);
      } else if (value !== undefined) {
        result[key] = value;
      }
    }
  }

  return result;
}

Unmounting'i önleme

onunload fonksiyonundaki e.preventDefault() ile unmounting engelleme özelliği kaldırıldı. Bunun yerine, beklenen koşullar karşılandığında m.route.set'i açıkça çağırmalısınız.

v0.2.x

javascript

var Component = {
  controller: function () {
    this.onunload = function (e) {
      if (condition) e.preventDefault();
    };
  },
  view: function () {
    return m('a[href=/]', { config: m.route });
  },
};

v2.x

javascript

var Component = {
  view: function () {
    return m('a', {
      onclick: function () {
        if (!condition) m.route.set('/');
      },
    });
  },
};

Bileşen kaldırıldığında kodu çalıştırma

Bileşenler artık kaldırıldıklarında this.onunload'u çağırmıyor. Artık standartlaştırılmış yaşam döngüsü kancası onremove'u kullanıyorlar.

v0.2.x

javascript

var Component = {
  controller: function () {
    this.onunload = function (e) {
      // ...
    };
  },
  view: function () {
    // ...
  },
};

v2.x

javascript

var Component = {
	onremove: function() {
		// ...
	}
	view: function() {
		// ...
	}
}

`m.request`

m.request tarafından döndürülen Promise'ler artık m.prop getter-setter'lar değil. Ek olarak, initialValue, unwrapSuccess ve unwrapError artık desteklenen seçenekler değil.

İstekler artık m.startComputation/m.endComputation davranışını sergilemiyor. Bunun yerine, bir istek promise zinciri tamamlandığında (eğer background: true ayarlanmamışsa) yeniden çizimler her zaman tetiklenir.

data parametresi ikiye ayrıldı: URL'ye enterpole edilerek isteğe eklenen sorgu parametreleri için params, ve XHR ile gönderilecek veri gövdesi için body.

v0.2.x'te, bir JSONP isteği başlatmak için dataType: "jsonp" kullanırdınız. v2.x'te, artık XHR ile ilgili parçalar olmadan m.request ile hemen hemen aynı API'yi taşıyan m.jsonp kullanıyorsunuz.

v0.2.x

javascript

var data = m.request({
  method: 'GET',
  url: 'https://api.github.com/',
  initialValue: [],
});

setTimeout(function () {
  console.log(data());
}, 1000);

m.request({
  method: 'POST',
  url: 'https://api.github.com/',
  data: someJson,
});

v2.x

javascript

var data = [];
m.request({
  method: 'GET',
  url: 'https://api.github.com/',
}).then(function (responseBody) {
  data = responseBody;
});

setTimeout(function () {
  console.log(data); // not: bir getter-setter değil
}, 1000);

m.request({
  method: 'POST',
  url: 'https://api.github.com/',
  body: someJson,
});

// VEYA

var data = [];
m.request('https://api.github.com/').then(function (responseBody) {
  data = responseBody;
});

setTimeout(function () {
  console.log(data); // not: bir getter-setter değil
}, 1000);

m.request('https://api.github.com/', {
  method: 'POST',
  body: someJson,
});

Ek olarak, extract seçeneği m.request'e geçirilirse, sağlanan fonksiyonun dönüş değeri doğrudan istek promise'ini çözmek için kullanılır ve deserialize geri çağrısı yoksayılır.

`m.request` başlıkları

v0.2.x'te, Mithril.js varsayılan olarak isteklere herhangi bir başlık ayarlamadı. Şimdi, en fazla 2 başlık ayarlıyor:

JSON gövdesi != null olan istekler için Content-Type: application/json; charset=utf-8
JSON yanıtları bekleyen istekler için Accept: application/json, text/*

Content-Type başlığı, CORS-safelisted istek başlığı olmadığı için CORS ön kontrolü tetikleyebilir ve sunucunuzdaki CORS yapılandırmasına bağlı olarak hatalara yol açabilir. Bununla ilgili sorunlarla karşılaşırsanız, headers: {"Content-Type": "text/plain"} geçirerek söz konusu başlığı geçersiz kılmanız gerekebilir. ( Accept başlığı hiçbir şeyi tetiklemez, bu nedenle onu geçersiz kılmanız gerekmez.)

Fetch spesifikasyonu, CORS ön getirme kontrollerinden kaçınmaya izin veren tek içerik türlerinin application/x-www-form-urlencoded, multipart/form-data ve text/plain olduğunu belirtir. Başka hiçbir şeye izin vermez ve kasıtlı olarak JSON'a izin vermez.

`m.deferred` kaldırıldı

v0.2.x sürümlerinde m.request'in temelini oluşturan m.deferred adında özel bir asenkron nesne kullanılıyordu. v2.x bunun yerine Promise'leri kullanır ve desteklemeyen ortamlarda bir polyfill uygular. m.deferred'i kullanacağınız durumlarda, bunun yerine Promise'leri kullanmalısınız.

v0.2.x

javascript

var greetAsync = function () {
  var deferred = m.deferred();
  setTimeout(function () {
    deferred.resolve('hello');
  }, 1000);
  return deferred.promise;
};

greetAsync()
  .then(function (value) {
    return value + ' world';
  })
  .then(function (value) {
    console.log(value);
  }); //1 saniye sonra "hello world" çıktısını verir

v2.x

javascript

var greetAsync = function () {
  return new Promise(function (resolve) {
    setTimeout(function () {
      resolve('hello');
    }, 1000);
  });
};

greetAsync()
  .then(function (value) {
    return value + ' world';
  })
  .then(function (value) {
    console.log(value);
  }); //1 saniye sonra "hello world" çıktısını verir

`m.sync` kaldırıldı

v2.x standartlara uygun Promise'leri kullandığından, m.sync gereksizdir. Bunun yerine Promise.all kullanın.

v0.2.x

javascript

m.sync([
  m.request({ method: 'GET', url: 'https://api.github.com/users/lhorie' }),
  m.request({
    method: 'GET',
    url: 'https://api.github.com/users/dead-claudia',
  }),
]).then(function (users) {
  console.log('Katkı Sağlayanlar:', users[0].name, 've', users[1].name);
});

v2.x

javascript

Promise.all([
  m.request({ method: 'GET', url: 'https://api.github.com/users/lhorie' }),
  m.request({
    method: 'GET',
    url: 'https://api.github.com/users/dead-claudia',
  }),
]).then(function (users) {
  console.log('Katkı Sağlayanlar:', users[0].name, 've', users[1].name);
});

`xlink` ad alanı gerekli

Ad alanı ayrıştırma desteği eklendiğinden, ad alanlı özelliklerin ad alanları artık açıkça belirtilmelidir.

v0.2.x

javascript

m(
  'svg',
  // `href` özelliği otomatik olarak ad alanına alınır
  m("image[href='image.gif']")
);

v2.x

javascript

m(
  'svg',
  // `href` özelliği üzerinde kullanıcı tarafından belirtilen ad alanı
  m("image[xlink:href='image.gif']")
);

Görünümlerde iç içe diziler

Diziler artık v2.x sanal DOM'unda yapısal öneme sahip olan parçaları temsil etmektedir. v0.2.x'te iç içe diziler karşılaştırma işlemi için tek bir listeye dönüştürülürken, v2.x dizi yapısını korur. Bu nedenle, bir dizinin alt öğeleri bitişik dizilerin kardeşleri olarak değerlendirilmez.

`vnode` eşitlik kontrolleri

Eğer bir vnode, son çizimde aynı pozisyonda bulunan vnode ile tamamen aynı ise, v2.x bu bölümdeki değişiklikleri kontrol etmez ve alt ağaçtaki yaşam döngüsü metotlarını çalıştırmaz. Bileşen belgeleri, bu konuyla ilgili daha fazla ayrıntı içerir.

v0.2.x'ten Geçiş ​

m.prop kaldırıldı ​

v0.2.x ​

v2.x ​

m.component kaldırıldı ​

v0.2.x ​

v2.x ​

m.withAttr kaldırıldı ​

v0.2.x ​

v2.x ​

m.version kaldırıldı ​

config fonksiyonu ​

v0.2.x ​

v2.x ​

Yeniden çizim davranışındaki değişiklikler ​

Artık yeniden çizim kilitleri yok ​

Olay işleyicilerinden yeniden çizimi iptal etme ​

v0.2.x ​

v2.x ​

Senkron yeniden çizim değiştirildi ​

v0.2.x ​

v2.x ​

m.startComputation/m.endComputation kaldırıldı ​

Bileşen controller fonksiyonu ​

v0.2.x ​

v2.x ​

Bileşen argümanları ​

v0.2.x ​

v2.x ​

Bileşen vnode çocukları ​

v0.2.x ​

v2.x ​

DOM vnode öğeleri ​

Keyler ​

view() parametreleri ​

v0.2.x ​

v2.x ​

m()'e bileşenleri geçirme ​

v0.2.x ​

v2.x ​

m.mount() ve m.route()'a vnode'lar geçirme ​

v0.2.x ​

v2.x ​

m.route.mode ​

v0.2.x ​

v2.x ​

m.route() ve anchor etiketleri ​

v0.2.x ​

v2.x ​

Yol şablonları ​

m.request URL'leri ​

m.route(route, params, shouldReplaceHistoryEntry) yolları ​

m.route rota kalıpları ​

Geçerli rotayı okuma/yazma ​

v0.2.x ​

v2.x ​

Rota parametrelerine erişme ​

v0.2.x ​

v2.x ​

Sorgu dizeleri oluşturma/ayrıştırma ​

v0.2.x ​

v2.x ​

Unmounting'i önleme ​

v0.2.x ​

v2.x ​

Bileşen kaldırıldığında kodu çalıştırma ​

v0.2.x ​

v2.x ​

m.request ​

v0.2.x ​

v2.x ​

m.request başlıkları ​

m.deferred kaldırıldı ​

v0.2.x ​

v2.x ​

m.sync kaldırıldı ​

v0.2.x ​

v2.x ​

xlink ad alanı gerekli ​

v0.2.x ​

v0.2.x'ten Geçiş

`m.prop` kaldırıldı

v0.2.x

v2.x

`m.component` kaldırıldı

v0.2.x

v2.x

`m.withAttr` kaldırıldı

v0.2.x

v2.x

`m.version` kaldırıldı

`config` fonksiyonu

v0.2.x

v2.x

Yeniden çizim davranışındaki değişiklikler

Artık yeniden çizim kilitleri yok

Olay işleyicilerinden yeniden çizimi iptal etme

v0.2.x

v2.x

Senkron yeniden çizim değiştirildi

v0.2.x

v2.x

`m.startComputation`/`m.endComputation` kaldırıldı

Bileşen `controller` fonksiyonu

v0.2.x

v2.x

Bileşen argümanları

v0.2.x

v2.x

Bileşen vnode çocukları

v0.2.x

v2.x

DOM vnode öğeleri

Keyler

`view()` parametreleri

v0.2.x

v2.x

`m()`'e bileşenleri geçirme

v0.2.x

v2.x

`m.mount()` ve `m.route()`'a vnode'lar geçirme

v0.2.x

v2.x

`m.route.mode`

v0.2.x

v2.x

`m.route()` ve anchor etiketleri

v0.2.x

v2.x

Yol şablonları

`m.request` URL'leri

`m.route(route, params, shouldReplaceHistoryEntry)` yolları

`m.route` rota kalıpları

Geçerli rotayı okuma/yazma

v0.2.x

v2.x

Rota parametrelerine erişme

v0.2.x

v2.x

Sorgu dizeleri oluşturma/ayrıştırma

v0.2.x

v2.x

Unmounting'i önleme

v0.2.x

v2.x

Bileşen kaldırıldığında kodu çalıştırma

v0.2.x

v2.x

`m.request`

v0.2.x

v2.x

`m.request` başlıkları

`m.deferred` kaldırıldı

v0.2.x

v2.x

`m.sync` kaldırıldı

v0.2.x

v2.x

`xlink` ad alanı gerekli

v0.2.x