เราเตอร์ Meteor Iron ไม่ทำงานบนลิงก์บางลิงก์

มีคุณสมบัติบางอย่างของ Iron Router ที่คุณต้องระวัง

สมมติว่าผู้ใช้อยู่ใน /boxes แล้ว และมีเทมเพลต box ที่แสดงผลสำหรับเส้นทางนั้น ถ้าคุณ:

• คลิกที่ลิงค์ <a href="/th/boxes?box=123">Click Me</a>

or

• คลิกที่ลิงค์ <a href="/th{{pathFor 'box'}}">Click Me</a>

Iron Router จะไม่เรนเดอร์เทมเพลตซ้ำเนื่องจากมีอยู่แล้วบนเพจ นอกจากนี้ จะไม่แสดงเทมเพลตซ้ำหากเทมเพลต box เป็นเทมเพลตบางส่วนที่ได้แสดงผลแล้วบนเพจที่คุณอยู่และยังมีอยู่ในเพจที่คุณต้องการนำทางไปด้วย

เนื่องจากไม่มีการเรนเดอร์ซ้ำ โค้ดใดๆ ที่คุณมีใน Template.box.onRendered จะไม่ทำงานอีกครั้งเช่นกัน

ลักษณะการทำงานนี้พบบ่อยที่สุดในเทมเพลต layout, header และ footer ของคุณ สำหรับผู้ใช้จำนวนมาก เทมเพลตเหล่านี้ใช้กับทุกหน้าของเว็บไซต์ โดยไม่คำนึงถึงเส้นทาง เนื่องจากเทมเพลตเค้าโครง ส่วนหัว และส่วนท้ายถูกแสดงผลในการเข้าชมไซต์ครั้งแรกของบุคคล จึงจะไม่ถูกเรนเดอร์ซ้ำอีกหากผู้ใช้ตัดสินใจที่จะนำทางไปยังส่วนอื่นๆ ของไซต์โดยใช้เทมเพลตเดียวกัน ดังนั้นโค้ด ภายใน Template.layout/header/footer.onRendered จะไม่ทำงาน

โปรดทราบด้วย - แม้ว่าตัวช่วย Spacebars แบบโต้ตอบจะเปลี่ยนรูปลักษณ์ทางกายภาพของเค้าโครง / ส่วนหัว / ส่วนท้าย แต่ก็ไม่เข้าข่ายเป็น render จริง ดังนั้นการอัปเดตแบบโต้ตอบในเทมเพลตจึงไม่ทริกเกอร์การเรียกกลับ onRendered

การไม่มีการเรนเดอร์ซ้ำเป็นสิ่งที่ทำให้ Meteor รู้สึก "เร็ว"

แก้ไข

พยายามเขียนโค้ดในรูปแบบที่โต้ตอบและขับเคลื่อนด้วยเหตุการณ์ พยายามอย่าคิดมากเกินไปในแง่การเรนเดอร์/การเรนเดอร์ซ้ำ

1. คุณไปที่ /box
2. คุณคลิกลิงก์สำหรับ /box?box=2342
3. รับพารามิเตอร์หรือแบบสอบถามของคุณใน Iron Router

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

4. ใน Iron Router ใช้ข้อมูลจากพารามิเตอร์หรือแบบสอบถามเพื่อตั้งค่า data context สำหรับเทมเพลต

5. ดึงข้อมูลจากบริบทข้อมูลตามต้องการภายในการโทรกลับ .onRendered, .events และ .helpers ของเทมเพลต

6. ตั้งค่า Session vars ตามความจำเป็น และใช้ในตัวช่วยเพื่อให้มีการเปลี่ยนแปลงที่เกิดขึ้นกับเพจโดยไม่ต้องเรนเดอร์เทมเพลตอีกครั้ง นอกจากนี้ ใช้เหตุการณ์เพื่อทริกเกอร์การอัปเดตเซสชันเพื่อทริกเกอร์การเปลี่ยนแปลงที่เกิดขึ้นกับเพจอีกครั้ง

ลองสิ่งนี้:

หลังจากนั้น ให้ไปที่ /test?BUNNIES=lalalala

ตรวจสอบบันทึกของคอนโซล

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);
  }

});

เราเตอร์.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')
    ];
  }
});

วิธีการเขียนเราเตอร์ที่สะอาดยิ่งขึ้น

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();
  }
})