Meteor Iron Router tidak berfungsi pada tautan tertentu

Ada beberapa sifat Iron Router yang perlu Anda waspadai.

Katakanlah pengguna saat ini sudah menggunakan /boxes dan ada templat box yang merender jalur tersebut. Jika kamu:

• klik tautan <a href="/id/boxes?box=123">Click Me</a>

or

• klik tautan <a href="/id{{pathFor 'box'}}">Click Me</a>

Iron Router TIDAK akan merender ulang template karena sudah ada di halaman. Ini juga TIDAK akan merender ulang templat jika templat box merupakan sebagian templat yang sudah dirender pada laman yang Anda buka dan juga ada pada laman yang ingin Anda navigasikan.

Karena tidak dirender ulang, kode apa pun yang Anda miliki di dalam Template.box.onRendered juga tidak akan berjalan lagi.

Perilaku ini paling umum terjadi pada templat layout, header, dan footer Anda. Bagi banyak pengguna, templat ini digunakan untuk semua halaman situs web, apa pun jalurnya. Karena templat tata letak, header, dan footer dirender pada kunjungan pertama seseorang ke situs, maka templat tersebut tidak akan dirender ulang lagi jika pengguna memutuskan untuk menavigasi ke bagian lain situs menggunakan templat yang sama, jadi kodenya di dalam Template.layout/header/footer.onRendered tidak akan menyala.

Perhatikan juga - meskipun pembantu Spacebars reaktif mengubah tampilan fisik tata letak/header/footer, itu tidak memenuhi syarat sebagai render sebenarnya, jadi pembaruan reaktif pada templat tidak memicu panggilan balik onRendered.

Kurangnya rendering ulang inilah yang membuat Meteor terasa "tajam".

EDIT

Cobalah membuat kode dengan gaya reaktif dan didorong oleh peristiwa. Usahakan untuk tidak terlalu memikirkan dalam artian render/render ulang.

1. Anda pergi ke /box
2. Anda mengeklik tautan untuk /box?box=2342
3. Dapatkan parameter atau kueri Anda di Iron Router

https://github.com/iron-meteor/iron-router/blob/devel/Guide.md#route-parameters

4. Di Iron Router gunakan data dari params atau kueri untuk menyetel data context untuk templat.

5. Ambil hal-hal dari konteks data sesuai kebutuhan di dalam callback .onRendered, .events, dan .helpers template.

6. Tetapkan var Sesi seperlunya dan gunakan dalam pembantu untuk memberikan perubahan reaktif pada halaman tanpa harus merender ulang templat. Gunakan juga peristiwa untuk memicu pembaruan pada vars sesi untuk, sekali lagi, memicu perubahan reaktif pada halaman.

Coba ini:

setelah itu, buka /test?BUNNIES=lalalala

periksa log konsol

test.html

<template name="test">

    {{myData}}

</template>

test.js

Template.test.helpers({

  myData: function() {
    console.log("data context accessed from test.helpers: ", this);
    console.log("this.BUNNIES accessed from test.helpers: ", this.BUNNIES);
    return this.BUNNIES;
  }

});

Template.test.onRendered(function() {

  console.log("data context accessed from test.onRendered: ", this.data);

});

Template.test.events({

  'click': function(){
    console.log("data accessed from test.events: ", this);
  }

});

router.js

Router.route('/test', function() {
  console.log("routed!");
  this.render('test');

}, {
  name: 'test',
  data: function(){
    //here I am setting the data context
    // for /test?BUNNIES=1234
    var query = this.params.query;
    console.log("query: ", query);

    return query;
  },
  waitOn: function() {
    console.log("waitOn is running (should see this message once for each subscription)");
    return [
      Meteor.subscribe('item_ownership_pub'),
      Meteor.subscribe('my_items')
    ];
  }
});

cara menulis router yang jauh lebih bersih

Router.route('/test', {
  waitOn: function() {
    console.log("waitOn is running (should see this message once for each subscription");
    return [
      Meteor.subscribe('item_ownership_pub'),
      Meteor.subscribe('my_items')
    ];
  },
  data: function(){
    var query = this.params.query;
    console.log("query: ", query);
    return query;
  },
  action: function(){
    console.log("this will re-render if url params changed");
    this.render();
  }
})