I want to fetch a view and its specific layout in controller and once that is done,i want to use variables inside the controller in the view and layout.
I want to use title in the layout and other variables in the view.
Currently i have this and i cant change the title in my layout
hi: function (req, res) {
res.view('noder/home',{ layout: 'layout' },{
locals: {
title : 'hello'
}
})},
How can i change the title in the layout on controller basis and use other variables within my view?
Try this:
hi: function(req, res) {
res.view('noder/home', {
layout: 'layout',
title: 'hello'
});
}
Make sure your layout.ejs file has following line in title tag
<title><%- title %></title>
Related
I have JSON that contains HTML tags such as href, how can I click it without refreshing the page? I have already searched for it but no one is working...
Table
JSON
I'm using JSON datatable.
to me it seems you need to use auth guards
see here
https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards
1st thing you must try is whether your are able to log something when your route is clicked by using code here
router.beforeEach((to, from, next) => {
console.log(to);
console.log(from);
})
if that's successful for this particular route try following
beforeRouteLeave (to, from, next) {
if (to === "edit") {
next(false)
}
}
Unless you're on full build, you cannot unfortunately add components dynamically like that. Have a read on Template Compilation and how to make use of it.
But in most cases (unless you're server-side rendering), you'd want to pass the router-link attributes as an object, something like:
const jsonData = [
{
id: 2,
title: 'First Vue JS',
body: 'Vue JS',
aksi: {
text: 'Edit',
attrs: {
to: {
name: 'edit',
params: {
// Assuming you have the `post` item here (usually while doing `v-for`)
id: post.id
}
},
class: 'btn btn-primary'
}
}
}
]
And rendering them, like:
<table>
<tr v-for="item in jsonData" :key="item.id">
<td>{{item.title}}</td>
<td>{{item.body}}</td>
<td>
<router-link v-bind="item.attrs">{{item.aksi.text}}</router-link>
</td>
</tr>
</table>
If you're not looping over them in the template, you might want to figure out how to do column rendering and customize this particular cell therein.
I have a keystonejs app setup, using express and jade.
I have a fullscreen background image setup in my default.jade file which defines various imports and also the header and footer of the site.
I am trying to rotate the image based on a selection of images that are located in the mongodb via mongoose.
I was having issues getting it to work, so i have just been trying to get the variable to print correctly in the header of my page.
I have the following code setup in my root middleware file, as part of the export.initLocals file:
exports.initLocals = function(req, res, next) {
var locals = res.locals;
locals.navLinks = [
{ label: 'Home', key: 'home', href: '/' },
{ label: 'News', key: 'blog', href: '/news' },
{ label: 'Creations', key: 'creation', href: '/creations' },
{ label: 'Contact', key: 'contact', href: '/contact' }
];
locals.user = req.user;
locals.imageURL = 'variable set';
WelcomeImage = keystone.list('WelcomeImage');
WelcomeImage.model.findOneRandom(function(err, result) {
if (!err) {
locals.imageURL = result.Image.url;
console.log(result.Image.url); // 1 element
} else {
console.log(err); // 1 element
}
});
next();
};
and within my default.jade file i have:
//- HTML BODY
body
#background-image
//- HEADER
#header: .container
//- Customise your site's navigation by changing the navLinks Array in ./routes/middleware.js
//- ... or completely change this header to suit your design.
div(role="navigation").navbar.navbar-default
.container-fluid
.navbar-header
.visible-xs.navbar-brand-xs.a(href='/')
img(align:"left",src="/images/wild_logo.png",border=0,width=45,height=45)
button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse')
span.sr-only Toggle navigation
span.icon-bar
span.icon-bar
span.icon-bar
.collapse.navbar-collapse
.hidden-xs.navbar-brand.a(href='/')
img(align:"left",src="/images/wild_logo.png",border=0,width=95,height=95)
ul.nav.navbar-nav.navbar-left
each link in navLinks
li(class=(section == link.key ? 'active' : null)): a(href=link.href)= link.label
ul.nav.navbar-nav.navbar-right
if user
if user.canAccessKeystone
li: a(href='/keystone') Open Keystone
li: a(href='/keystone/signout') Sign Out
else
if imageURL
| #{imageURL}
else
There is no variable
//li: a(href='/keystone/signin') Sign In
//- BODY
#body
Now every time i load the page i see the variable rendered in the page, but it is set as 'variable set' and never get's set to the actual URL.
Now if i watch the console, the correct value is sent to the console on the line directly after it's set on locals.
So, any ideas what i'm doing wrong. I'm very new to express/jade so it's likely i'm overlooking something in the order things are done?
Thanks in advance!
Cheers
Gareth
Try moving next() inside the callback function of the findOneRandom call. You're basically telling node it's safe to move on before the callback is complete.
Glad that helped. Thanks!
I have a rails 4 + emberjs application. I am trying to create nested routes in ember. I am refering the 'nested routes' section from http://emberjs.com/guides/routing/defining-your-routes/. All the defiend routes for post work fine but the routes for 'comments' dont work. My current ember routes are as:
App.Router.map ->
#resource 'posts', ->
#route 'edit',
path: '/:id/edit'
#route 'show',
path: '/:id'
#resource "comments",
path: '/:post_id/comments'
, ->
#route "new"
I have a CommentsNewRoute file as:
App.CommentsNewRoute = Ember.Route.extend
model: (params) ->
post: #store.find 'post', params.post_id
And have a template as comments.handlebars containing {{outlet}} and comments/new.handlebars containing 'Hello World'. Have places comments.handlebars and new.handlebars inside posts templates as well as at the same level. Still, none are rendered.
the link-to helper is as:
{{#link-to 'comments.new' id classNames='pull-right' }}Add New Comment{{/link-to}}
The problems are that 1) The params in the CommentsNewRoute is an empty object and doesnt contain post_id. 2) The new comments template isnt rendered when i click a link that points to '/#/posts/2/comments/new'. 3) How can i display the post's objects data on the new comments page? What am I doing wrong?
Dynamic segment values are only available to the route that the dynamic segment belongs to.
Which means you should load the post on App.CommentsRoute and reuse it on App.CommentsNewRoute, see the example
App.CommentsRoute = Ember.Route.extend({
model: function (params) {
return this.store.find('post', params.post_id);
}
});
App.CommentsNewRoute = Ember.Route.extend({
model: function () {
return this.modelFor('comments');
}
});
More info
When using Iron Router with Meteor.js 0.8.3, how can I have a text in a view template that changes depending on which route the user is on?
For example, if a user is at /profile, the text would be User Profile and if he is at / the text will be Home.
header.html
<template name="header">
<h1>{{ routeTitle }}</h1>
</template>
profile.html
<template name="profile">
{{> header}}
</template>
router.js
Router.map( function() {
this.route('index', {
path: '/',
template: 'index'
})
this.route('profile', {
path: '/profile/:_id',
template: 'profile',
data: function() { return Users.findOne(this.params._id); }
})
})
I personally store my own properties in the route options like this :
Router.map(function(){
this.route("index", {
// iron-router standard properties
path: "/",
// custom properties
title: "Home"
//
controller: "IndexController"
});
this.route("profile", {
path: "/profile/:_id",
title: "User profile",
controller: "ProfileController"
});
});
Then I extend the Router with a set of utilities functions to access the current route.
_.extend(Router,{
currentRoute:function(){
return this.current()?this.current().route:"";
}
});
UI.registerHelper("currentRoute",Router.currentRoute.bind(Router));
Using these utilities, you can call Router.currentRoute() in JS which happens to be a reactive data source too, as it acts as a wrapper for Router.current().
Use Router.currentRoute() && Router.currentRoute().options.title to check whether there is a current route and fetch the title you declared in the route definition.
In templates you can use {{currentRoute.options.title}} to fetch the current title, this is helpful when working with iron-router layouts.
If you want to get more specific you can even mimic the Router.path and pathFor helper behavior :
_.extend(Router,{
title:function(routeName){
return this.routes[routeName] && this.routes[routeName].options.title;
}
});
UI.registerHelper("titleFor",Router.title.bind(Router));
Now you can call Router.title("index") in JS and {{titleFor "index"}} in templates.
You can even get as far as having a dedicated helper for the current route title, as you suggested in your question :
UI.registerHelper("currentRouteTitle",function(){
return Router.currentRoute() && Router.currentRoute().options.title;
});
You can achieve this very easily with data param of the path:
Router.map(function() {
this.route('...', {
...
data: function() {
return {
importantText: 'User Profile',
};
},
});
});
Now use it as any other data object in your rendered template, layout template, or any of the templates rendered to named area:
{{importantText}}
I am using Durandal for a very simple website. In all of my browser tabs the page title is coming up with "undefined|" appended to the front of the application's title. Where is Durandal getting and setting that value?
pthalacker
Ultimately Durandal's router plugin is setting the document.title.
https://github.com/dFiddle/dFiddle-1.2/blob/gh-pages/App/durandal/plugins/router.js#L254
onNavigationComplete: function (routeInfo, params, module) {
if (app.title) {
document.title = routeInfo.caption + " | " + app.title;
} else {
document.title = routeInfo.caption;
}
},...
Typically Durandal is able to construct a missing caption propterty on the route object, so maybe there's something different in the way the routes are set up.
https://github.com/dFiddle/dFiddle-1.2/blob/gh-pages/App/samples/shell.js#L6
router.map([
{ url: 'hello', moduleId: 'samples/hello/index', name: 'Hello World', visible: true },
{ url: 'hello/:name', moduleId: 'samples/hello/index', name: 'Examples' },...
]);
You can set the page title when the viewmodel gets activated:
activate: function (params) {
// Setting page title
params.routeInfo.caption = "My Page Title";
return true;
}
Replacing page titles in Durandal 2.1.0
(if you want to the page title to be something distinct from the last level of the route)
Slight modification to RainerAtSpirit's answer: Specify 'title' in the route instead of 'name'.
router.map([
{ url: 'hello', moduleId: 'samples/hello/index', title: 'Hello World', visible: true },
{ url: 'hello/:name', moduleId: 'samples/hello/index', title: 'Examples' },...
]);