Meteor: หน้าโปรไฟล์ผู้ใช้พร้อม Iron Router

โชคดีที่ทุกคุณลักษณะที่คุณกำลังมองหานั้นมีอยู่ในปลั๊กอิน ดังนั้นคุณจึงไม่จำเป็นต้องเจาะลึกในการกำหนด hooks ของคุณเองด้วยซ้ำ

โปรดสังเกตว่าฉันใช้ iron:[email protected] ซึ่งเป็นสิ่งสำคัญในการติดตามข่าวสารล่าสุด มีเพียงสองประเด็นเล็กๆ น้อยๆ ในขณะนี้ที่ฉันหวังว่าจะได้รับการแก้ไขในเร็วๆ นี้

เริ่มต้นด้วยการเผยแพร่โปรไฟล์ผู้ใช้ ซึ่งใช้ชื่อผู้ใช้เป็นอาร์กิวเมนต์

server/collections/users.js

Meteor.publish("userProfile",function(username){
    // simulate network latency by sleeping 2s
    Meteor._sleepForMs(2000);
    // try to find the user by username
    var user=Meteor.users.findOne({
        username:username
    });
    // if we can't find it, mark the subscription as ready and quit
    if(!user){
        this.ready();
        return;
    }
    // if the user we want to display the profile is the currently logged in user...
    if(this.userId==user._id){
        // then we return the corresponding full document via a cursor
        return Meteor.users.find(this.userId);
    }
    else{
        // if we are viewing only the public part, strip the "profile"
        // property from the fetched document, you might want to
        // set only a nested property of the profile as private
        // instead of the whole property
        return Meteor.users.find(user._id,{
            fields:{
                "profile":0
            }
        });
    }
});

มาดูเทมเพลตโปรไฟล์กันต่อ ไม่มีอะไรพิเศษเกินไปที่นี่ เราจะแสดงชื่อผู้ใช้เป็นข้อมูลสาธารณะ และหากเรากำลังดูโปรไฟล์ส่วนตัว ก็แสดงชื่อจริงของผู้ใช้ที่เราถือว่าถูกเก็บไว้ใน profile.name

client/views/profile/profile.html

<template name="profile">
    Username: {{username}}<br>
    {{! with acts as an if : the following part won't be displayed
        if the user document has no profile property}}
    {{#with profile}}
        Profile name : {{name}}
    {{/with}}
</template>

จากนั้นเราจำเป็นต้องกำหนดเส้นทางสำหรับมุมมองโปรไฟล์ในการกำหนดค่าเราเตอร์ทั่วโลก:

lib/router.js

// define the (usually global) loading template
Router.configure({
    loadingTemplate:"loading"
});

// add the dataNotFound plugin, which is responsible for
// rendering the dataNotFound template if your RouteController
// data function returns a falsy value
Router.plugin("dataNotFound",{
    notFoundTemplate: "dataNotFound"
});

Router.route("/profile/:username",{
    name:"profile",
    controller:"ProfileController"
});

โปรดทราบว่าตอนนี้ iron:router ต้องการให้คุณกำหนดเส้นทางและตัวควบคุมเส้นทางของคุณในไดเร็กทอรีที่ใช้ร่วมกัน (โดยปกติคือ lib/ dir ที่รากของโปรเจ็กต์ของคุณ) ที่พร้อมใช้งานสำหรับทั้งไคลเอ็นต์และเซิร์ฟเวอร์

ตอนนี้สำหรับส่วนที่ยากที่สุด ProfileController คำจำกัดความ :

lib/controllers/profile.js

ProfileController=RouteController.extend({
    template:"profile",
    waitOn:function(){
        return Meteor.subscribe("userProfile",this.params.username);
    },
    data:function(){
        var username=Router.current().params.username;
        return Meteor.users.findOne({
            username:username
        });
    }
});

เมื่อ iron:router ตรวจพบว่าคุณกำลังใช้ waitOn ใน RouteController ตอนนี้จะเพิ่มตะขอ loading เริ่มต้นโดยอัตโนมัติ ซึ่งมีหน้าที่รับผิดชอบในการแสดงผล loadingTemplate ในขณะที่การสมัครสมาชิกยังไม่พร้อม

ตอนนี้ฉันจะพูดถึงข้อบกพร่องเล็กๆ น้อยๆ สองข้อที่ฉันได้พูดถึงไปแล้วในการเริ่มคำตอบ

ก่อนอื่น iron:router คำแนะนำอย่างเป็นทางการ (ซึ่งคุณควรอ่านอย่างแน่นอน) http://eventedmind.github.io/iron-router/ ระบุว่าชื่อของตัวเลือกที่คุณควรส่งไปยังปลั๊กอิน dataNotFound คือ dataNotFoundTemplate แต่ ณ วันที่ 28-09-2557 สิ่งนี้จะไม่ทำงาน คุณต้องใช้ชื่อเดิม notFoundTemplate ซึ่งมีแนวโน้มที่จะได้รับการแก้ไขในเรื่องหนึ่ง ของวัน

เช่นเดียวกับโค้ดของฟังก์ชัน data ของฉันในคอนโทรลเลอร์: ฉันใช้ไวยากรณ์ที่เคาน์เตอร์ใช้งานง่าย Router.current().params เพื่อเข้าถึงพารามิเตอร์เส้นทางเมื่อปกติ this.params จะเป็นไวยากรณ์ปกติที่เหมาะสม นี่เป็นอีกปัญหาที่ยังได้รับการแก้ไข https://github.com/EventedMind/iron-router/issues/857