2015-09-30 4 views
0

Я пытаюсь отобразить имя пользователя на навигационной панели, но этот навигатор находится в частичной папке, и ни один из маршрутов в node.js не отображает navbar.ejs, потому что это просто частичный. Я использую библиотеку ejs-mate для использования многоразового компонента компоновки для других компонентов html, так что мне не нужно копировать и вставлять коды (следуя принципу DRY), почему? потому что ejs не имеет встроенного компонента многоразового компонента компоновки, а другие библиотеки не поддерживаются другими разработчиками.Как передать объект пользователя частичным в ejs?

В настоящее время

У меня есть два пути

app.get('/', passport.isAuthenticated, function(req, res) { 
    res.render('home' { 
    user: req.user 
    }); 
}); 

app.get('/anotherRoute', function(req, res) { 
    res.render('test'); 
}); 

У меня есть два EJs файлы

home.ejs

<%- layout('boilerplate') %> 

<h1>Home Page</h1> 

another.ejs

<%- layout('boilerplate') %> 

<h1>Another Page</h1> 

Эти два файла ejs используют layoutplate.ejs для макета, поэтому я не должен копировать и вставлять одни и те же коды снова и снова.

templateplate.ejs - В этом файле у меня есть navbar и некоторые другие частичные.

<!DOCTYPE html> 
<html lang="en"> 
<head> 

    <% include ./partials/navbar %> 
</head> 
<body> 

    <header> 
     <% include ./partials/header %> 
    </header> 

<div class="container"> 
    <main> 
     <%- body -%> 
    </main> 

    <footer> 
     <% include ./partials/footer %> 
    </footer> 
    </div> 

</body> 
</html> 

Это файл Navbar, и посмотрите на NavBar правый класс,

if user is logged in render name 
else render about and signup 

navbar.ejs

<nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 

     <div class="navbar-header"> 
      <a class="navbar-brand" href="/"> 
       StartupClone 
      </a> 
     </div> 

     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="/">About</a></li> 
      <% if (!user) { %> 

      <li><a href="/signup">Signup</a></li> 
      <li><a href="/login">Login</a></li> 
     </ul> 
     <% } else{ %> 
      <li><a><%= user.profile.name %></a></li> 
     <% } %> 
    </div> 
</nav> 

Проблема сейчас она работает только с маршрут, по которому я передаю объект пользователя, но не другие маршруты. Я знаю, что мне нужно передать объект пользователя на каждый маршрут, но это не хорошо, потому что снова мне нужно скопировать и вставить коды снова в каждом маршруте, который против принципа DRY,

Представьте, если у вас 40 маршрутов что нужно использовать эту Navbar, это будет кошмар для меня :(

Если вы, ребята, есть какие-либо идеи о том, как взломать этот, не стесняйтесь одалживать свои мысли о том, как решить эту проблему.

+0

http://expressjs.com/guide/using-template-engines.html первый аргумент визуализации() является шаблон, тогда как остальные аргументы являются переменными, которые вы хотите доступны в шаблоне. – guptakvgaurav

ответ

1

Вы имеют, чтобы передать объект, который имеет используемые свойства для каждого вызова res.render(), его нет. Это даже в примере использования в docum ejs-mate ентация.

Сказав это, существует способ сохранить код DRY. Используйте функцию, которая устанавливает общие свойства на объект ввода, то для каждого маршрута установить уникальные свойства необходимы:

function setSharedProperties(req, data) { 
    if(!(data instanceof Object)) { 
     data = {}; 
    } 
    data.user = req.user; 

    return data; 
} 

app.get('/', passport.isAuthenticated, function(req, res) { 
    res.render('home', setSharedProperties(req)) 
}); 

app.get('/anotherRoute', function(req, res) { 
    res.render('test', setSharedProperties(req, {prop1: val1})); 
}); 
1

является обязательным передать объект, который вы пытаетесь получить доступ на просмотр. Одна вещь, которую вы можете сделать, это сохранить пользовательский объект в сеансе и проверить сеанс проверки для объекта пользователя. Таким образом, вам придется передать только объект сеанса, хотя я использую этот трюк для этой проблемы.

В вашем паспорте промежуточного программного обеспечения.isAuthenticated на удачном входе сохранить объект пользователя в сессии

module.exports.isAuthenticated = function(req, res, next) { 
    /* 
    check for valid credentials 
    */ 
    if (success) 
    { 
    req.session.user = foundUserInfo; 
    } 
    next(); 
} 

и в вашем частичном виде

<!-- navbar.ejs --> 
<nav class="navbar navbar-default" role="navigation"> 
<div class="container-fluid"> 

    <div class="navbar-header"> 
     <a class="navbar-brand" href="/"> 
      StartupClone 
     </a> 
    </div> 

    <ul class="nav navbar-nav navbar-right"> 
     <li><a href="/">About</a></li> 
     <% if (!session.user) { %> 

     <li><a href="/signup">Signup</a></li> 
     <li><a href="/login">Login</a></li> 
    </ul> 
    <% } else{ %> 
     <li><a><%= session.user.profile.name %></a></li> 
    <% } %> 
</div> 

Теперь вы просто должны пройти объект сеанса для каждого маршрута.

app.get('/', passport.isAuthenticated, function(req, res) { 
    res.render('home' { 
     user: req.user, 
     session: req.session 
    }); 
}); 

app.get('/anotherRoute', function(req, res) { 
    res.render('test', {session: null}); 
}); 
Смежные вопросы