I'm building a menu in Meteor and missing something in the syntax.
I can only guess it's simple but couldn't find any strait question or answer about this, help appreciated.
So, I have one template to rule dem all:
<template name="navigator">
<div class="navigator">
{{>navButton type="home"}}
{{>navButton type="find"}}
{{>navButton type="account"}}
</div>
</template>
my navButton template looks like this:
<template name="navButton">
<div class="navButton">
<p>
{{#if type}}
<a href="{{pathFor type}}"</a>
{{/if}}
</p>
</div>
</template>
the {{pathFor type}} doesn't work.
How can I simply use the type argument string WITHOUT ANY JAVASCRIPT (of course I'm naming the route and templates using the same name)
update:
i don't want to do this due to an implementation of a security pattern:
{{type}}
If you have the routes already set as my example, you can use
Home
Example of route mapping:
Router.route('/', {
name: 'home'
});
Related
So I have an easy-search template:
<template name="searchBox">
<div class="">
{{> EasySearch.Autosuggest index=PlayersIndex }}
</div>
</template>
And I'd like to make the input field look like this (have the following attributes):
<input
type="text"
placeholder="Type to add new player"
ref="textInput"
/>
I've tried adding the attributes to the argument but that doesn't seem to work:
{{> EasySearch.Autosuggest index=PlayersIndex type="text"}}
Any ideas how to achieve this?
Just add attributes property in your HTML:
{{> EasySearch.Input index=index attributes=inputAttributes}}
And in your JS, fill it with your needed data:
`Template.leaderboard.helpers({
inputAttributes: function () {
return { 'class': 'easy-search-input', 'placeholder': 'Start searching...' };
}
)}
`
I was able to find the answer by looking at this repo, so make sure to check github repos as they might contain helpful examples. ;)
As the title says, this.render does not render a template it's provided with. This is the code in router.js:
Router.configure({
layoutTemplate: 'main'
});
Router.route('/', function(){
this.render('postsList');
});
The file containing the layout template, main.html:
<template name='main'>
<div class='container'>
<header class='navbar'>
<div class='navbar-inner'>
<a class='brand' href='/'>MyApp</a>
</div>
</header>
<div id='main' class='row-fluid'>
{{> yield}}
</div>
</div>
</template>
And the file containing the postsList template which is passed to this.render() function
<template name='postsList'>
<div class='posts'>
{{#each posts}}
{{> postItem}}
{{/each}}
</div>
</template>
So when I go to localhost:3000/ the page displays only the main template and not the postsList template. However, there is no error, unless I completely remove Router.route(...), at which point it will display the standard 'route not found' error.
Also, I tried not using the global template, but a route template, by removing Router.configure(...) and adding this.layout('main') to Router.route(...). The browser then displays nothing.
Your code is perfectly fine. I also came across this issue. The iron:router package seems to be missing the ejson dependancy.
Add the ejson to your app and it should work.
meteor add ejson
I'm sure when iron:router is updated this will be resolved.
projects.html
{{#if projects}}
{{#each projects}}
<div class="project-item">
<div class="project-name">
{{name}}
</div>
<div class="project-settings">
<span class="rename">Rename</span>
<span class="edit">Edit</span>
<span class="delete">
<!-- Here -->
</span>
</div>
</div>
{{/each}}
{{/if}}
projects.js
Template.Projects.events({
"click .project-item .delete": function (e, template) {
e.preventDefault();
debugger
// "this" refers to the specific project
}
});
In an event handler, I noticed "this" conveniently refers to a specific object inside the template where the event is related to. For example, in this case, the delete button is inside each projects block, and the handler for the delete button has this = some project. This is convenient, but I'd like to know the scopes and rules more completely. Can someone explain in briefly and point me to the right document?
This is a data context sensitive feature. Basically, there is a lexical scope in spacebars helpers. Have a look at this: http://devblog.me/no-data-context.html
The original pull request is here: https://github.com/meteor/meteor/pull/3560
I'm trying to implement my own login buttons on meteor via:
<template name="login">
<div id="login-buttons">
{{#if currentUser}}
Hello, {{currentUser.profile.name}}
<button id='logout-button' class='small'>Sign Out</button>
{{else}}
<div class="service-login-buttons">
{{#each services}}
{{> _loginButtonsLoggedOutSingleLoginButton}}
{{/each}}
</div>
{{/if}}
</div>
</template>
main.js:
Template.login.helpers({
services: function() {
return getLoginServices();
}
})
Problem is, getLoginServices() doesn't seem to work, I also tried Accounts._loginButtons.getLoginServices() , doesn't exist either.
Any ideas (accounts-ui version 1.15 if it helps) ?
I just worked on the same issue and was able to get the login buttons working.
I performed this with the packages accounts-password 1.1.1 and ian:accounts-ui-bootstrap-3 1.2.71 installed.
My HTML looks similar to yours, but note that difference in the template that I'm calling. I browsed through the Accounts._loginButtons object and looked through the meteor github to find a template I wanted to use Meteor Github re: login buttons
<template name = "intro">
<div class = "container-fluid black">
<div class="service-login-buttons">
{{#each service}}
{{> _loginButtonsLoggedOutAllServices}}
{{/each}}
</div>
</div>
</template>
For my meteor version I found that Accounts._loginButtons.getLoginServices() worked for returning the login services available. If this doesn't work can you take a look at the Accounts._loginButtons object to see what is available?
Template.intro.helpers({
service:function(){
return Accounts._loginButtons.getLoginServices();
}
})
I have a layout with 2 containers 1)productView and 2)calendarView. My Router is configured as follows:
this.route('productDetail', {
layout: 'main',
path: '/products/:_id',
waitnOn: function(){...},
data: function(){...},
yieldTemplates: {
'calendarView: { to: calendar }
}
});
I now want to achieve that whenever the route changes (e.g. from 'products/1' to 'products/2') only the productView is re-rendered and that calendarView does nothing. As for now every time the 'productDetail/:id' route is called the 'calendarView' function 'Template.calendarView.rendered' gets called and re-renders the template. My 'main' template looks like this:
<template name="main">
<div>
{{yield}}
</div>
<div>
{{yield 'calendar'}}
</div>
</template>
Is there a way to tell the router to only render certain templates? Or is there a better solution?
Any help is much appreciated.
Is there a reason why you use the router for the calendar view ?
I think one solution may be not to use the router for the calendar view
<template name="main">
<div>
{{yield}}
</div>
<div>
{{>calendar}}
</div>
</template>