javascript - Meteor:带有 Iron Router 的用户配置文件页面

Question

我正在努力创建一个用户配置文件页面，使用位于 localhost:3000/:username 的 Iron Router。个人资料页面应具有以下特征:

• 公开 View ——任何人都可以看到用户的基本信息
• 私有(private) View - 如果客户在登录后访问他或她自己的个人资料页面，则会显示他或她的敏感用户数据，并且他们具有编辑功能
• 加载 View - 在获取用户个人资料数据时，显示加载屏幕
• 未找到 View - 如果在 URL 中输入了无效的用户名，则返回未找到的页面。

公共(public) View 和私有(private) View 应存在于相同 URL 路径中。根据客户的凭据，他们会看到一个或另一个，而无需重定向到不同的页面。未找到的页面也不应该重定向，这样如果输入无效的用户名，用户仍然可以在浏览器 URL 栏中看到无效的 URL。

我的 router.js 文件:

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

在 ProfileController 中，我试图将以下内容拼凑在一起:

• onBeforeAction - 显示加载屏幕；确定用户名是否存在(也就是 URL 是否有效)
  • 显示未找到的 View 、私有(private)资料或公开资料
• waitOn - 在移除加载屏幕之前等待用户名的数据被检索
• onAfterAction - 移除加载屏幕

谢谢!

Answer 1

幸运的是，您正在寻找的每个特性都可以在插件中烘焙，因此您甚至不必深入定义自己的钩子(Hook)。

请注意，我正在使用 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
            }
        });
    }
});

让我们继续配置文件模板，这里没什么特别的，我们会将用户名显示为公共(public)数据，如果我们正在查看私有(private)配置文件，则显示我们假设存储在 profile 中的用户真实姓名。姓名。

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>

然后我们需要在全局路由器配置中为配置文件 View 定义一个路由:

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 现在要求您在共享目录中定义路由和路由 Controller (通常这是项目根目录中的 lib/ 目录) 对客户端和服务器都可用。

现在是最棘手的部分，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 检测到您在 RouteController 中使用 waitOn 时，它现在会自动添加默认的 loading 钩子(Hook)负责在订阅尚未准备好时呈现 loadingTemplate。

我现在将解决我在回答开始时提到的两个小错误。

首先，官方iron:router 指南(您绝对应该阅读)http://eventedmind.github.io/iron-router/提到您应该传递给 dataNotFound 插件的选项名称是 dataNotFoundTemplate 但截至 28-09-2014 这将不起作用，您需要使用旧版name notFoundTemplate，这可能会在几天内得到修复。

Controller 中我的 data 函数的代码也是如此:我使用了违反直觉的语法 Router.current().params 来访问通常 this.params 是适当的常规语法时的路由参数。这是另一个尚未解决的问题。 https://github.com/EventedMind/iron-router/issues/857