I am writing a simple meteor app and finding that IntelliJ IDEA 14.1.4 (with the Meteor and Handlebars plugins installed and enabled) does not recognize spacebars templates:
After googling, I tried File > Invalidate Caches/Restart but this did not work.
I also find that when I run Code > Reformat Code, the resulting indentation is not correct. I assume both problems are related.
Here is an even simpler illustration of the problem:
How can I debug this?
Finally, I find the really tricky syntax error in my IntelliJ IDEA 14.
The main problem is the space between {{ and # or /.
{{#if currentUser}} is right in syntax but {{ #if currentUser }} is wrong.
Alike, user {{/if}} instead of {{ /if }}.
So the spacebars usage is really strict here. Actually, there should be no extra spaces.
<template name="home">
{{#if currentUser}}
<div class="template-home">
<div class="well">
<form class="form-inline syllabus-chooser">
<div class="form-group">
<select name="syllabusChooser" id="syllabusChooser" class="form-control">
<option value="0">(Select a syllabus to edit)</option>
{{#each syllabusSelectors}}
<option value="{{ value }}">{{ label }}</option>
{{/each}}
</select>
</div>
<button type="submit" id="syllabusChooserButton" class="btn btn-default">Edit</button>
</form>
</div>
{{#if displayID}}
<div class="well">
{{#autoForm collection="Syllabuses" doc=selectedSyllabusDoc id="insertSyllabusForm" type="update"}}
<fieldset>
<div class="row">
<div class="col-sm-2">{{> afQuickField name='alphaNumber' placeholder="ICS 101"}}</div>
<div class="col-sm-2">{{> afQuickField name='creditHours' placeholder="3"}}</div>
<div class="col-sm-2">{{> afQuickField name='prerequisites' placeholder="311 or consent"}}</div>
<div class="col-sm-6">{{> afQuickField name='title' placeholder="Course title"}}</div>
</div>
<div class="row">
<div class="col-sm-6">{{> afQuickField name='instructor' rows=2 placeholder="Name\noffice address, email"}}</div>
<div class="col-sm-6">{{> afQuickField name='textbooks' rows=2 placeholder= "Textbook title and author, or 'none'"}}</div>
</div>
<div class="row">
<div class="col-sm-6">{{> afQuickField name='objectives' rows=4 placeholder='* Students have ...\n* Students can ...\n* Students can ....'}}</div>
<div class="col-sm-6">{{> afQuickField name='policies' rows=4 placeholder="Can be 'none'."}}</div>
</div>
<div class="row">
<div class="col-sm-6">{{> afQuickField name='description' rows=4 placeholder='Insert course catalog description: http://www.catalog.hawaii.edu/courses/departments/ics.htm'}}</div>
<div class="col-sm-6">{{> afQuickField name='grading' rows=4 placeholder="5 homework assignments (10% each)\n1 midterm (15%)\n1 final exam (15%)\n1 final project (20%)"}}</div>
</div>
<div class="row">
<div class="col-sm-6">{{> afFormGroup name='learningOutcomes' type="select-checkbox"}}</div>
<div class="col-sm-6">
{{> afQuickField name='courseLearningOutcomes' rows=12 placeholder="* Learning Outcome 1\n* Learning outcome 2"}}
{{> afQuickField name='schedule' rows=12 placeholder="Week 1: ...\nWeek 2: ...\nWeek 3: ..."}}
</div>
</div>
</fieldset>
<button type="submit" class="btn btn-default btn-success btn-block">Save</button>
{{/autoForm}}
</div>
{{/if}}
</div>
<div class="well" style="padding: 0; max-height: 100px; overflow-y: auto">
<ul>
{{#each editStatusList}}
<li>Started editing {{ syllabusName }} {{ editTimestamp }} {{#if editFinished}} ... finished. {{/if}} </li>
{{/each}}
</ul>
</div>
{{/if}}
</template>
Related
I use the Handlebars template engine:
`{{#each classes}}
<div class="col_4">
<h4>{{this.title}}</h4>
<p>{{this.description}}</p>
<a class="button" href="/classes/{{_id}}/details">View Class</a>
</div>
{{/each}}`
Why is it not possible to address title and description as individual fields of this?
If I use "this" like this:
{{#each classes}}
<div class="col_4">
<h4>{{this}}</h4>
<p>{{this}}</p>
<a class="button" href="/classes/{{_id}}/details">View Class</a>
</div>
{{/each}}
all fields are displayed merged.
The following code works with an earlier version:
{{#each classes }}
<div class="col_4">
<h4>{{title}}</h4>
<p>{{description}}</p>
<a class="button" href="/classes/{{_id}}/details">View Class</a>
</div>
{{/each}}
I have a row that needs to be displayed/hidden based on a variable as follows:-
{{#if ShowCamValue == true}}
<div class="row">
<div class="cell">
CAM (SF)
</div>
{{#each Properties}}
<div class="cell">
{{Property.Cam}}
</div>
{{/each}}
</div>
{{/if}}
Even though, this is true(i.e. ShowCamValue equals "true") it still doesn't display the row. Any ideas what's going on.
You just do,
{{#if ShowCamValue}}
instead of == that's not valid in handlebar.
and also check each helper syntax, you haven't defined Property. you can use this
{{#each Properties}}
<div class="cell">
{{this.Cam}}
</div>
{{/each}}
I've tried half a dozen different ways to do this but i'm not sure what the issue is.
To start, here is a quick drawing of what im trying to accomplish:
What I want:
http://prntscr.com/br8xh6
whats happening:
http://prntscr.com/br8z8p
What seems to be happening is that my .row .full-row is being rendered twice, and the dynamic template is not being loaded into my <div class="col-md-10> as defined. Why would this be?
Heres my current code:
<body>
<div class="container full-container">
{{> navbar}}
{{> middle}}
</div>
</body>
<template name="navbar">
...
</template>
<template name="middle">
<div class="row full-row">
<div class="col-md-2 left-bar" style="background:#800000;">
{{> Template.dynamic template=sidebar}}
</div>
<div class="col-md-10">
{{> Template.dynamic template=content}}
</div>
</div>
<!-- </div> -->
</template>
<template name="leftbar">
<div class="row">
<div class="col-md-12">
{{> avatar size="large" shape="circle"}}
</div>
</div>
</template>
<template name="usercard">
<div class="col-md-4">
<div class="thumbnail thumb-dark">
<img src="default.png" alt="...">
<div class="caption">
<h3>Player name</h3>
<p>...</p>
Join
</div>
</div>
</div>
</template>
<template name="home">
<div class="row">
{{#each playerslooking}}
{{> usercard}}
{{/each}}
</div>
</template>
<template name="find_page">
<div style="height:150px;width:150px;background:blue;">hello</div>
</template>
JS:
FlowRouter.route('/', {
action: function() {
BlazeLayout.render("middle", {sidebar: 'leftbar', content: "home"});
}
});
FlowRouter.route('/find/:_id', {
name: 'postfind.show',
action: function() {
BlazeLayout.render('middle', {sidebar: 'leftbar', content: "find_page"});
}
});
I've refactored my code several times trying to debug this, as I'm not sure how BlazeLayout is suppose to work with nested templates.
All input appreciated, thanks.
Just in case, did you have a try at Blaze Layout root modification?
See: https://github.com/kadirahq/blaze-layout#set-different-root-node
I've looked for tutorials about AutoForm's custom field templates but I'm not sure where I'm going wrong with mine. If anyone has any suggestions it would be greatly appreciated.
My Schema: One field is an Array of Objects.
guests: {
type: Array,
minCount: 1,
maxCount: 10,
label: "Guests in Party"
},
"guests.$": {
type: Object,
label: "Guest Object"
},
"guests.$.firstName": {
type: String,
label: "First Name"
},
"guests.$.lastName": {
type: String,
label: "Last Name"
}
Template Code:
<template name='afArrayField_guestsObjectField'>
{{#afEachArrayItem name="guests" minCount="this.atts.minCount" maxCount="this.atts.maxCount"}}
<div class="form-group">
<label class="control-label col-sm-2">Guest</label>
{{> afObjectField name="this.name" label="false" template='customObjectField'}}
<div class="col-sm-2">
{{#if afArrayFieldHasLessThanMaximum name="guests"}}
<button type="button" class="btn btn-primary autoform-add-item" data-autoform-field="{{guests}}" data-autoform-minCount="{{this.atts.minCount}}" data-autoform-maxCount="{{this.atts.maxCount}}"><span class="glyphicon glyphicon-plus"></span></button>
{{/if}}
{{#if afArrayFieldHasMoreThanMinimum name="guests"}}
<button type="button" class="btn btn-primary autoform-remove-item pull-left"><span class="glyphicon glyphicon-minus"></span></button>
{{/if}}
</div>
</div>
{{/afEachArrayItem}}
</template>
<template name="afObjectField_customObjectField">
<div class="col-sm-4">
{{> afFieldInput name="this.firstName" class="form-control" placeholder="First Name"}}
{{#if afFieldIsInvalid name='this.firstName'}}
<span class="help-block">{{{afFieldMessage name='this.firstName'}}}</span>
{{/if}}
</div>
<div class="col-sm-4">
{{> afFieldInput name="this.lastName" class="form-control" placeholder="Last Name"}}
{{#if afFieldIsInvalid name='this.lastName'}}
<span class="help-block">{{{afFieldMessage name='this.lastName'}}}</span>
{{/if}}
</div>
</template>
The problem I am having is that the plus buttons shows up after the firstName and lastName field how I want it to, but when I press it another guest object (in the form) does not generate. Any thoughts?
I want to create a form that shows different sections depending on which template it belongs to. I want the data that the user enters to be reactive: if the user changes from one template to another, her previous entries should still be visible. I plan to create a "form" template, so that I can have a single Template.form.events function that will set the appropriate Session variables as the form is filled in.
My question is about how to populate the form dynamically. Here's how I've attempted to go about this, but all the fields appear all the time.
<body>
{{> form1}}
{{> form2}}
<h1>Log in</h1>
{{> form name=1 password=1}}
</body>
<template name="form1">
{{#form name=1 species=1}}
<h1>Form 1</h1>
{{/form}}
</template>
<template name="form2">
<h1>Form 2</h1>
{{>form name=1 planet=1 asMenu=1}}
</template>
<template name="form">
{{#if name=1}}
<input type="text" name="name" placeholder="Name" value="">
{{/if}}
{{#if species=1}}
<input type="text" name="species" placeholder="Species" value="">
{{/if}}
{{#if planet=1}}
{{#if asMenu=1}}
<select name="">
<option value="Erth">Erth</option>
<option value="Othr">Othr</option>
</select>
{{else}}
<input type="text" name="planet" placeholder="Planet" value="">
{{/if}}
{{/if}}
{{#if password=1}}
<input type="password" name="password" value="">
{{/if}}
<br />
<button type="submit">Submit</button>
</template>
Can you help me to understand how to resolve this?
Firstly spacebars doesn't support comparisons so {{#if var=1}} is invalid syntax. However 1 is true so I'm going to take advantage of that to replace {{#if name=1}} with {{#if name}}:
<body>
{{> form1}}
{{> form2}}
<h1>Log in</h1>
{{> form name=1 password=1}}
</body>
<template name="form1">
<h1>Form 1</h1>
{{>form name=1 species=1}}
</template>
<template name="form2">
<h1>Form 2</h1>
{{>form name=1 planet=1 asMenu=1}}
</template>
<template name="form">
{{#if name}}
<input type="text" name="name" placeholder="Name" value="">
{{/if}}
{{#if species}}
<input type="text" name="species" placeholder="Species" value="">
{{/if}}
{{#if planet}}
{{#if asMenu}}
<select name="">
<option value="Erth">Erth</option>
<option value="Othr">Othr</option>
</select>
{{else}}
<input type="text" name="planet" placeholder="Planet" value="">
{{/if}}
{{/if}}
{{#if password}}
<input type="password" name="password" value="">
{{/if}}
<br />
<button type="submit">Submit</button>
</template>