javascript – Meteor:用户配置文件页面与铁路由器

前端之家收集整理的这篇文章主要介绍了javascript – Meteor:用户配置文件页面与铁路由器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在努力创建一个用户配置文件页面,使用Iron Router,它位于localhost:3000 /:username.配置文件页面应具有以下特征:

>公开视图 – 任何人都可以看到有关用户的基本信息
>私人视图 – 如果客户在登录时访问他或她自己的个人资料页面,则显示他或她的敏感用户数据,并且他们具有编辑功能
>加载视图 – 正在获取用户配置文件数据时,显示加载屏幕
>未找到的视图 – 如果无效的用户名输入到URL中,返回未找到的页面.

公共视图和私有视图应该存在于同一个URL路径上.根据客户端的凭据,他们会看到一个或另一个,而不重定向到不同的页面.未找到的页面也不应重定向,如果输入无效的用户名,用户仍然可以在浏览器URL栏中看到无效的URL.

我的router.js文件

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

在ProfileController中,我试图一起划分以下内容

> onBeforeAction – 显示加载屏幕;确定是否存在用户名(如果URL有效)

>显示未找到的视图,私人配置文件或公开的个人资料

> waitOn – 等待在删除加载屏幕之前检索用户名的数据
> onAfterAction – 删除加载屏幕

谢谢!

解决方法

幸运的是,您正在寻找的每个特征都可以在插件中烘烤,因此您甚至不必在定义自己的钩子时潜水.

请注意,我使用铁:router@1.0.0-pre2,这对于跟上最新的东西很重要,目前只有两个小小的怪癖,我希望很快就能修复.

我们从用户配置文件发布开始,用户名作为参数.

服务器/收藏/ 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中的用户真实姓名.

客户端/视图/资料/ 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"
});

请注意,铁路由器现在要求您在共享目录中定义路由和路由控制器(通常这是项目根目录中的lib / dir)可用于客户端和服务器.

现在对于最棘手的部分,ProfileController定义:

LIB /控制器/ 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
        });
    }
});

当铁:路由器检测到您在RouteController中使用waitOn时,它将自动添加默认加载挂钩,该挂载负责在订阅尚未准备的时候渲染loadTemplate.

现在我谈谈我在回答中谈到的两个小错误.

首先,官方的铁:路由器指南(你应该明确地看到)http://eventedmind.github.io/iron-router/提到你应该传递给datanotFound插件的选项的名称是datanotFoundTemplate,但是从28-09-2014开始,这不会工作,你需要使用遗留的名字notFoundTemplate,这可能会在几天内得到修复.

控制器中我的数据功能代码也一样:我通常使用反直觉语法Router.current().params来访问路由参数,通常this.params将是适当的常规语法.这是另一个尚待解决的问题. https://github.com/EventedMind/iron-router/issues/857

原文链接:https://www.f2er.com/js/151821.html

猜你在找的JavaScript相关文章