Yol Yönetimi

m.route ve m.request fonksiyonlarının her birinde yol (path) olarak adlandırılan bir kavram bulunur. Bu, yönlendirileceğiniz veya veri çekeceğiniz URL'yi oluşturmak için kullanılır.

Yol Türleri

İki temel yol türü vardır: ham yollar ve parametreli yollar.

• Ham yollar, doğrudan URL olarak kullanılan basit dizelerdir. Herhangi bir değişiklik veya ayrıştırma yapılmaz. Tüm parametreler sonuna eklenerek normalleştirilir.
• Parametreli yollar, URL enjeksiyonuna karşı güvenliği sağlamak ve kullanımı kolaylaştırmak amacıyla, değerler varsayılan olarak otomatik olarak kodlanarak yollara eklenir.

m.request için bunlar neredeyse her URL olabilir, ancak rotalar için bunlar yalnızca şema veya alan adı içermeyen mutlak URL yol adları olabilir.

Yol Parametreleri

Yol parametreleri oldukça basittir. İki farklı biçimde kullanılırlar:

• :foo - Bu, params.foo değerini URL'ye eklerken, değeri otomatik olarak kodlar.
• :foo... - Bu, params.foo değerini URL'ye ham olarak (kodlamadan) ekler.

Buradaki params nesnesinin ne anlama geldiğini merak ediyor olabilirsiniz. Cevap basittir: bu, ya m.route.set(path, params) ya da m.request({url, params}) içindeki params nesnesidir.

m.route(root, defaultRoute, routes) aracılığıyla rotalar tanımlarken, bu parametreleri rotalardan değerleri çıkarmak için kullanabilirsiniz. Temelde yolları oluşturma mantığıyla aynı şekilde çalışır, ancak bu işlem tersine çevrilmiştir.

// Tek bir öğeyi düzenleme
m.route(document.body, '/edit/1', {
  '/edit/:id': {
    view: function () {
      return [m(Menu), m('h1', 'Düzenlenmekte olan kullanıcı ' + m.route.param('id'))]; // Düzenlenmekte olan kullanıcı + id
    },
  },
});

// Yol ile tanımlanan bir öğeyi düzenleme
m.route(document.body, '/edit/pictures/image.jpg', {
  '/edit/:file...': {
    view: function () {
      return [m(Menu), m('h1', 'Düzenlenmekte olan dosya ' + m.route.param('file'))]; // Düzenlenmekte olan dosya + file
    },
  },
});

İlk örnekte, varsayılan rotaya gittiğinizi varsayarsak, m.route.param("id") "1" olarak ve m.route.param("file") pictures/image.jpg olarak okunacaktır.

Yol parametreleri /, - veya . karakterleri ile ayrılabilir. Bu sayede dinamik yol bölümlerine sahip olabilirsiniz ve bu yöntem, basit bir yol adından çok daha fazla esneklik sunar. Örneğin, dosya uzantısına göre düzenleme için "/edit/:name.:ext" veya yerelleştirilmiş bir rota için /:lang-:region/view" gibi rotalarla eşleşebilirsiniz.

Yol parametreleri açgözlü (greedy) eşleşme yapar: "/edit/:name.:ext" şeklinde tanımlanmış bir rota verildiğinde, /edit/file.test.png adresine giderseniz, çıkarılan parametreler {name: "file.test", ext: "png"} olacaktır, {name: "file", ext: "test.png"} değil. Benzer şekilde, "/route/:path.../view/:child..." verildiğinde, /route/foo/view/bar/view/baz adresine giderseniz, çıkarılan parametreler {path: "foo/view/bar", child: "baz"} olacaktır.

Parametre Normalleştirme

Yol adlarına yerleştirilen yol parametreleri, okunabilirliği artırmak ve URL'yi daha temiz tutmak için sorgu dizelerinden çıkarılır. Örneğin, bu, URL dizesinde yinelenen id=1'i atlayarak GET /api/user/1/connections?sort=name-asc sunucu isteğini gönderir.

m.request({
  url: 'https://example.com/api/user/:userID/connections',
  params: {
    userID: 1,
    sort: 'name-asc',
  },
});

Ayrıca, yukarıdakiyle eşdeğer olan bu örnekte olduğu gibi, parametreleri sorgu dizesinde açıkça belirtebilirsiniz:

m.request({
  url: 'https://example.com/api/user/:userID/connections?sort=name-asc',
  params: {
    userID: 1,
  },
});

Ve elbette, bunları karıştırıp birleştirebilirsiniz. Bu, GET /api/user/1/connections?sort=name-asc&first=10 isteğini tetikler.

m.request({
  url: 'https://example.com/api/user/:userID/connections?sort=name-asc',
  params: {
    userID: 1,
    first: 10,
  },
});

Bu durum rota eşleştirmeye de uygulanabilir: sorgu dizgeleri içeren bir rotayla bile eşleşebilirsiniz. Eşleşen parametre, kolaylık sağlaması açısından saklanır; böylece bu parametrelere vnode özellikleri veya m.route.param aracılığıyla erişmeye devam edebilirsiniz. Bunun mümkün olduğunu unutmayın; ancak genellikle önerilmez, çünkü sayfalar için yolları kullanmak daha iyi bir yaklaşımdır. Sadece belirli bir dosya türü için farklı bir görünüm oluşturmanız gerektiğinde bazen işe yarayabilir; ancak bu durumda bile mantıksal olarak ayrı bir sayfa değil, sorgu parametresine benzer bir durum söz konusudur.

// Not: Bu genellikle *önerilmez* - sorgu dizeleri yerine rota tanımları için yolları tercih etmelisiniz.
m.route(document.body, '/edit/1', {
  '/edit?type=image': {
    view: function () {
      return [m(Menu), m('h1', 'Fotoğraf düzenleniyor')];
    },
  },
  '/edit': {
    view: function () {
      return [m(Menu), m('h1', 'Düzenlenen ' + m.route.param('type'))];
    },
  },
});

Sorgu parametreleri otomatik olarak algılanır; bunları kullanmak için ayrıca tanımlamanıza gerek yoktur. "/edit?type=image" gibi mevcut bir değere göre eşleşebilirsiniz, ancak değeri kabul etmek için "/edit?type=:type" kullanmanız gerekmez. Aslında Mithril.js, bu durumu m.route.param("type") === ":type" ifadesiyle birebir eşleşme aradığınız şeklinde yorumlayacaktır; bu nedenle büyük olasılıkla bu şekilde kullanmak istemezsiniz. Kısacası, sorgu parametrelerini okumak için m.route.param("key") veya rota bileşeni özniteliklerini kullanın.

Yol Normalleştirme

Ayrıştırılan yollar, yinelenen parametrelerden ve gereksiz eğik çizgilerden temizlenmiş olarak döndürülür ve her zaman bir eğik çizgiyle başlar. Bu küçük farklılıklar genellikle sorunlara yol açar ve yönlendirme ile yol yönetimini gereğinden fazla karmaşık hale getirir. Mithril.js, yönlendirme için yolları dahili olarak normalleştirir, ancak mevcut, normalleştirilmiş rotayı doğrudan göstermez. (Bunu m.parsePathname(m.route.get()).path aracılığıyla hesaplayabilirsiniz.)

Eşleştirme sırasında yinelenen parametreler söz konusu olduğunda, sorgu dizgesindeki parametreler yol adındaki parametrelere göre, URL'nin sonuna yakın olan parametreler ise URL'nin başına yakın olan parametrelere göre önceliklidir.

Yol Kaçışı (Escaping)

Bazı karakterler vardır ki, bunları tam anlamıyla kullanmak istiyorsanız kaçırmanız (escape etmeniz) gerekir. İyi haber şu ki, encodeURIComponent fonksiyonu bu karakterleri (ve daha fazlasını) kodlar. Parametreleri değiştirirken veya sorgu parametreleri eklerken bu fonksiyon otomatik olarak devreye girerek gerekli kodlamayı yapar. İşte Mithril.js'nin yorumladığı karakterler:

• : = %3A
• / = %2F (yalnızca yollarda gereklidir)
• % = %25
• ? = %3F (yalnızca yollarda gereklidir)
• # = %23

Elbette, URL standardına göre kaçmanız gereken başka karakterler de var, örneğin boşluklar. Ancak zaten belirtildiği gibi, encodeURIComponent bunu sizin için yapar ve Mithril.js, parametreleri değiştirdiğinizde bunu örtük olarak kullanır. Bu nedenle, parametreleri m.request("https://example.com/api/user/User%20Name/:field", {params: {field: ...}}) örneğindeki gibi doğrudan belirtiyorsanız bu duruma dikkat etmeniz gerekir.