Meteor：使用Iron Router的用戶配置文件頁面

Question

我正在努力創建一個用戶配置文件頁面，使用Iron Router，它位於localhost:3000/:username 。 配置文件頁面應具有以下特征：

• 公共視圖 - 任何人都可以看到有關用戶的基本信息
• 私人視圖 - 如果客戶在登錄時訪問他或她自己的個人資料頁面，則會顯示他或她的敏感用戶數據，並且他們具有編輯功能
• 加載視圖 - 在提取用戶配置文件數據時，顯示加載屏幕
• 找不到視圖 - 如果在URL中輸入了無效的用戶名，則返回未找到的頁面。

公共視圖和私有視圖應存在於同一 URL路徑中。 根據客戶端的憑據，他們會看到一個或另一個沒有重定向到其他頁面。 未找到的頁面也不應該重定向，這樣如果輸入無效的用戶名，用戶仍然可以在瀏覽器URL欄中看到無效的URL。

我的router.js文件：

this.route('profile', {
    controller: 'ProfileController',
    path: '/:username'
  });

在ProfileController ，我試圖湊合以下內容：

• onBeforeAction - 顯示加載屏幕; 確定用戶名是否存在（即URL是否有效）
  • 顯示未找到的視圖，私人個人資料或公開個人資料
• waitOn - 在刪除加載屏幕之前等待檢索username的數據
• onAfterAction - 刪除加載屏幕

謝謝！

Answer 1

幸運的是，您正在尋找的每個特征都可以在插件中找到，因此您甚至不必潛入定義自己的掛鈎。

請注意，我正在使用iron:router@1.0.0-pre2 ，這對於跟上最新的東西非常重要，目前只有兩個小怪癖，我希望很快能得到修復。

讓我們從用戶配置文件發布開始，它將用戶名作為參數。

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-2014這不起作用，你需要使用遺留名稱notFoundTemplate ，這可能會在幾天內得到修復。

對於控制器中我的data函數的代碼也是如此：我使用反直覺語法Router.current().params來訪問路由參數，通常this.params是適當的常規語法。 這是另一個尚未解決的問題。 https://github.com/EventedMind/iron-router/issues/857