I'm trying to avoid repetitive template code for forms that are essential the same when creating or editing new items.
For example, something like this:
<template name="createOrEdit">
<form role="form">
<div class="form-group">
<input type="text" class="form-control" id="title" placeholder="Title"/ value="{{title}}">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</template>
<template name="create">
{{> createOrEdit}}
</template>
<template name="edit">
{{> createOrEdit}}
</template>
Then, I could created separate template handlers:
Template.create.events(...
Template.edit.events(...
However, those parent template wrappers won't get the events for the main child template.
Is there a way to do what I want?
Those parent templates can get the events from child template. Use it like this:
Template.create.events({
'click .btn':function(){
}
})
Template.edit.events({
'click .btn':function(){
}
})
In Template.createOrEdit.events object you keep events used by both templates and in Template.edit.events and Template.create.events specific code for each.
see proof and
source code
This approach is really nice as you can customize form by passing some variables:
{{# create btnText="create" }}{{/create}}
{{# edit btnText="update" }}{{/edit}}
And in createOrEdit template you can use variable btnText to change button's label.
Related
I'm writing a fun little project to build up my HTML/JS skills. I'm using Handlebars to render some forms, and I hit something I can't seem to get around.
I've registered this as a partial template named 'checkbox':
<label>
<input
type="checkbox"
id="{{id}}"
name="{{id}}"
value="true">
{{labelText}}
</label>
That did me well when I was making forms to add data, but now I'm making forms to edit data, so I want to make the checkbox checked if the current item already is checked. I can't figure out how to make this work.
The first thing I tried was something like this:
<label>
<input
type="checkbox"
id="{{id}}"
name="{{id}}"
value="true"
checked="{{isChecked}}">
{{labelText}}
</label>
But if I pass that values like isChecked=true I get a checked box every time, because I guess for that kind of attribute in HTML being present at all means 'true'. OK.
So I tried using the if helper:
<input
type="checkbox"
id="{{id}}"
name="{{id}}"
value="true"
{{#if isChecked}}checked{{/if}}>
{{labelText}}
This sort of works. If I omit the isChecked property entirely, the box is unchecked. If I hard-code a true or false value like this, it works:
{{> checkbox id="test" labelText="test" isChecked=true }}
But I can't seem to get what I want with a value there. For example, if I try:
{{> checkbox id="test" labelText="test" isChecked="{{someCondition}}" }}
It seems like the condition isn't properly being resolved because I always get the attribute in that case.
What am I missing? I feel like there should be a way to do this, but I'm running out of tricks.
You cannot put an expression inside of another expression:
{{> checkbox id="test" labelText="test" isChecked="{{someCondition}}" }}
From examples you wrote I assume the problem you are having is related to how you pass the context - id and labelText are hardcoded while isChecked is expected to be a variable of some sort. In reality all those should be variables. Consider the following example - HTML:
<div id="content"></div>
<script id="parent-template" type="text/x-handlebars-template">
{{#each checkboxes}}
{{> checkbox this }}<br>
{{/each}}
</script>
<script id="partial-template" type="text/x-handlebars-template">
<input
type="checkbox"
id="{{id}}"
name="{{id}}"
value="true"
{{#if isChecked}}checked{{/if}}>
{{labelText}}
</script>
JS:
var parentTemplate = Handlebars.compile($("#parent-template").html());
Handlebars.registerPartial({
checkbox: Handlebars.compile($("#partial-template").html())
});
$('#content').html(parentTemplate(
{checkboxes: [
{id: 1, labelText: "test 1", isChecked: true},
{id: 2, labelText: "test 2", isChecked: false},
]}
));
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. ;)
I have been working with meteor.js and have been practicing using examples from getting started with meteor.js Javascript framework. The book is 2 years old and I have been running across some snags. For instance the book tells you to use var to define a variable, but after searching on stack I read that you didn't have to use it and now it works. I'm new so I write programs, run them, debug them and start from scratch to help me learn. For some reason this program that I have done 4 times before today is not running and I cant figure out why.
I keep getting this message :
While building the application:
LendLib.html:37: Expected "template" end tag
...  </div>
after inputting the following code:
<head>
<title>LendLib</title>
</head>
<body>
{{> hello}}
<div id="categories-container">
{{> categories}}
</div>
</body>
<template name="hello">
<h1>Lending Library</h1>{{greeting}}
<input type="button" value="Click" />
<template name="categories">
<div class="title">my stuff</div>
<div id="categories">{{#each lists}}
<div class="category">{{Category}}</div>{{/each}} </div>
</template>
</template>
any advice will be appreciated
dont define templates inside another template.
try like this.
<template name="hello">
<h1>Lending Library</h1>
{{greeting}}
<input type="button" value="Click" />
</template>
<template name="categories">
<div class="title">my stuff</div>
<div id="categories">
{{#each lists}}
<div class="category">
{{Category}}
</div>
{{/each}} 
</div>
</template>
Like pahan said, you cannot define a template within another template. They each have to be separate and un-nested. You CAN, however, call a template from within another template.
<template name="myOtherTemplate">
<h1> Lalalala </h1>
</template>
<template name="myTemplate">
{{> myOtherTemplate}} //injects the contents of myOtherTemplate
</template>
On another note, you also cannot nest Template instances within other Template instances.
Say that you want to register a helper function only after a certain template has been rendered.
Template.myTemplate.rendered = function({
Template.myTemplate.helpers({
key: "value",
anotherKey: "anotherValue"
});
});
^^ This also won't work.
Hi I have this template
<template name="users">
{{#each user}}
<li id="{{_id}}">
<input type="checkbox" checked />
<span><select name="colorpicker">
{{#each color}}
<option value="{{mColorCode}}" {{selected ../mColor mColorCode}}>{{mColorName}}</option>
{{/each}}
</select>
</span>
<img width="40" src="data:image/png;base64,{{mImage}}" />
<span class="name">{{mUsername}}</span>
<p><span class="description">{{mDescription}}</span></p>
</li>
{{/each}}
</template>
What i want to do is after the template is rendered, i want to convert the dropdown to a colorpicker. I'm using a jquery plugin
Template.users.rendered = function(){
$('select[name="colorpicker"]').simplecolorpicker({picker: true});
}
The problem is sometimes its not working, (Sometimes the call is being made before the dom being ready.)
I want to call this plugin after everything is rendered. and not for each user added, how can i do this ?
Thanks
I've found Meteor to be a little funny with how often it renders templates, and jQuery functions can end up building up.
I've taken to adding console.log("users rendered"); to understand how many times and when the render callback is triggered.
One thing I've had some success with is wrapping that template inside another, and then tying the callback to the outside template. Something like this:
<template name="container">
{{> users}}
</template>
<template name="users">
{{#each user}}
<li id="{{_id}}">
<input type="checkbox" checked />
<span><select name="colorpicker">
{{#each color}}
<option value="{{mColorCode}}" {{selected ../mColor mColorCode}}>{{mColorName}}</option>
{{/each}}
</select>
</span>
<img width="40" src="data:image/png;base64,{{mImage}}" />
<span class="name">{{mUsername}}</span>
<p><span class="description">{{mDescription}}</span></p>
</li>
{{/each}}
</template>
And this just add the callback to the container
Template.container.rendered = function(){
$('select[name="colorpicker"]').simplecolorpicker({picker: true});
console.log("rendered");
}
Not totally sure why it works, but it has for me, hopefully someone can illuminate us both.
This is the solution that I used, it's also a hack if someone has a better solution please post it.
What i did was i put the rendered template in the callback of the subscribe of my collection.
So my code was something like this :
Meteor.subscribe('trackedUser',function(){
Template.users.rendered = function(){
......
}
}
I see this is a pretty old post, but since I had a problem and I think I've found a better way, here it is. The containing template will technically be rendered even while the contents are rendering. In my case I was trying to initialize a materialize modal. To make it work It had to do the following.
template.html
<div class="row" id="eventResults">
{{#each eventResults}}
{{> eventResult}}
{{/each}}
</div>
<template name="eventResult">
<div class="modal event" id="{{id}}">
<div class="modal-content">
...
and template.js
Template.eventResult.onRendered(function(){
this.$('.modal-trigger').leanModal();
By calling the code on the onRendered of the child element and using this.$('...'), the code doesn't get called multiple times for each element, just once each.
I have this Template:
<template name="body">
{{#if key}}
{{> mite}}
{{else}}
{{> settings}}
{{/if}}
</template>
and
<template name="settings">
<h1>The settings</h1>
<form class="form-inline">
<input id='apiKey' type='text' name='apiKey' placeholder='your API-Key'>
<button id='saveSettings' type='submit' class='btn'>save</button>
</form>
</template>
<template name="mite">
<div>
<h3>...here with key</h3>
<p>
<a id="optout" href="#">not your key?</a>
</p>
</div>
</template>
When I show the settings-form where the user can set the key needed to show the 'mite' template. Now when i 'submit' the form the page get reloaded and the 'mite' template is shown.
On the mite template I'd like to have that link 'not your key?' or something that deletes the key and then shows the settings-form again. It works with a reload... but can't I do this without all the reloading in Meteor? How can i 'call' the template part with the #if in the body template?
-- Renato
You need to bind an event handler to your form and use preventDefault() to stop it submitting. e.g
client side js
Template.settings.events({
'submit':function(event,template) {
event.preventDefault();
var apiKey = template.find('input[name=apiKey]').value;
//..rest of logic to handle submit event
Session.set("key",true);
}
});
You can then use a template helper with Session.get("showthistemplate") to decide whether to show another template or not: (this is a universal helper since you're putting it in and not a template:
Handlebars.registerHelper('key',function() {
return Session.set("key",true);
});