I'm making a movie search based on data I'm getting from rotten tomatoes api. I'm using handlebars.js. So far I've got this template and it works just fine.
<div class="info">
<h3>{{title}}</h3>
<span> Year: {{year}} </span>
<span> Studio:{{studio}} </span>
<span> Synopsis:{{synopsis}} <span>
</div>
However, some of of movies don't have a studio provided so I'd like to make that in this case no "Studio:" would be printed. This is my code to do so:
{{#if studio}}
<span> Studio:{{studio}} </span>
{{/if}}
I've copied it from example provided on handebars.js page. Still it doesn't work. Could anyone explain me what I'm missing? I suppose there is no need to use Handlebars.registerHelper since I'm using this simple if statement. Or is it?
see this jsFiddle. You should not have any issue with that.
From documentation.
You can use the if helper to conditionally render a block. If its
argument returns false, undefined, null, "" or [] (a "falsy" value),
Handlebars will not render the block.
So check your 'studio' value.
Code that i have fiddled.
HTML:
<p>{{name1}}</p>
{{#if name2}}
<p>{{name2}}</p>
{{/if}}
<p>End</p>
js:
this.$el.html(temp({name1: 'stack'}));
Related
In my Stencil theme, I am including a few different size charts for products which I intend to include by just changing the path to the size chart document. I found dynamicComponent in the Stencil docs and I thought I understood the way it worked. In my higher level partial, I am binding the string to component in this way - (product.html)
<div class="container" itemscope itemtype="http://schema.org/Product">
{{> components/products/product-view schema=true sizeChart='components/products/size_charts/tshirt.html'}}
{{#if product.videos.list.length}}
{{> components/products/videos product.videos}}
{{/if}}
{{#if settings.show_product_reviews}}
{{> components/products/reviews reviews=product.reviews product=product urls=urls}}
{{/if}}
</div>
(product-view.html)
{{#if sizeChart}}
<div class="tab-content" id="tab-sizeChart">
{{dynamicComponent sizeChart}}
</div>
{{/if}}
Where all I wish to change is the variable sizeChart in future theme maintenance. When the page renders, the place where I wrote the dynamicComponent is blank.
I used if conditionals instead of dynamicComponent. It wasn't what I thought it was.
I'm trying to create a quiz app on Meteor and have had trouble setting up Iron Router forever. I'll try to give a visual:
This is the front page:
Image 1
When a user clicks on the button shown above, I want the first question to show up, whose contents are filled from MongoDB.
Image 2
This is what my router looks like ("question" is the name of the question template, as seen in image 2):
Router.route("/quiz/:_id", {
name: "question",
data: function(){
return Quiz.findOne(this.params._id);}
});
Now, in order for me to get from image 1 to image 2, I have to use a mongo object _id in the html file.
<template name="main">
<div class="jumbotron">
<h2>
Welcome to Simple Meteor Quiz app!
</h2>
<p>
To try it out, simply click "start" below!
</p>
<p>
<a class="btn btn-primary btn-large" href="/quiz/cieLkdzvGZPwrnZYE">Start</a>
</p>
</div>
</template>
When I click "Next Question" on image 2 to go onto the 2nd question, it doesn't work. I don't know how to make this process dynamic.
The way it looks to me right now is that I physically have to create a new route for every single question, which would look really ugly really quickly.
Any way to help implement Iron Router in this scenario? I read Discover Meteor and thought I fully understood how Iron Router works, but the more I try to fix this, the more I get confused.
Edit:
To solve my dilemma, I simple created a helper function which I could place behind the /quiz/ in the main template to lead me to the quiz question, based on a suggestion by Michel Floyd.
So the helper ends up looking like this:
Template.main.helpers({
nextQuestion: function(){
queue = Quiz.find().fetch();
return queue[0]._id;
}
});
Then attached to the URL like this:
<a class="btn btn-primary btn-large" href="/quiz/{{nextQuestion}}">Start</a>
Basically just spit out the first _id of first item in the array by making the collection an array via find().fetch(). Will probably randomize the _id at a later time.
You need a way for each template to know what the next question is. For example you can add a nextQuestionId key to your Quiz object. Then your template can be:
<template name="main">
<div class="jumbotron">
<h2>
Welcome to Simple Meteor Quiz app!
</h2>
<p>
To try it out, simply click "start" below!
</p>
<p>
<a class="btn btn-primary btn-large" href="/quiz/{{nextQuestionId}}">
Start
</a>
</p>
</div>
</template>
What is the least code / very simple way to dynamically show a html element "the meteor way"? Jquery.show() is very simple but doesn't work and it seems odd that Meteor way requires lines and lines of code? Any suggestions welcome!
Use UI.dynamic. There's a really good example of how to do it in this post on creating a simple modal. Here are the relevant snippets:
<template name="modal">
{{#if activeModal}}
<div class="modal">
{{> UI.dynamic template=activeModal}}
</div>
{{/if}}
</template>
Template.modal.helpers({
activeModal: function() {
return Session.get('activeModal');
}
});
Has anyone here gotten a jQuery masking library to work with Autoform? I'm trying BootStrap Form Helpers
<div class="col-md-12">
<div class="form-group">
{{> afFieldLabel name="customerInfo.agentPhone"}}
<input name="customerInfo.agentPhone" type="text" class="form-control track-order-change bfh-phone" required data-schema-key="customerInfo.agentPhone" data-format="ddd ddd-dddd">
</div>
</div>
I have customerInfo.agentPhone set to required in my schema.
When I do this code I lose the ability to validate the form against the schema. The input field can be blank and the error message that says this field can't be blank never shows up.
I figured it out. It turns out that I was using afFieldInput incorrectly - every time you use afFieldInput you have to have an #if statement to change the CSS of the wrapping div to show the validation message.
<div class="col-md-12 {{#if afFieldIsInvalid name="customerInfo.agentPhone"}}has-error{{/if}}">
<div class="form-group">
{{> afFieldLabel name="customerInfo.agentPhone"}}
{{> afFieldInput name="customerInfo.agentPhone" class="form-control track-order-change bfh-phone" data-format=" (ddd) ddd-dddd"}}
</div>
</div>
Note two things:
You have to put bfh-phone for the class.
You have to put a space in front of the parenthesis " (ddd) ddd-dddd". If you don't and just do "(ddd) ddd-dddd" the ( gets inserted into the text field on load. And obviously if you're checking to make sure that the text field is not blank, it won't fire because the ( is loaded in there already.
I've never used autoform, but looking over the documentation I'm wondering have you tried this:
{{> afFieldInput name="customerInfo.agentPhone" data-format="ddd ddd-dddd" }}
(obviously adding any additional attributes you may have set to afFieldInput before)
I'm migrating some code to blaze and have hit a problem with the bootstrap carousel that I can't seem to get over.
I had the following pre blaze to set one of the carousel items active to kick the whole thing off
<div class="item {{#if active_sponsor}}active{{/if}}">
As documented, this no longer works with blaze, so I've tried modifying it to the only thing I can think of which is
{{#if active_sponsor}}
<div class="item {{#if active_sponsor}}active{{/if}}">
{{else}}
<div class="item">
{{/if}}
This all lives within an {{each sponsors}} block.
Sadly, this fails to run with an error saying unexpected {{else}} (or, if I remove the {{else}} unexpected {{/if}}
What's the correct way to do this. I'm using exactly the same pattern earlier to change a
From "Using Blaze" on github :
https://github.com/meteor/meteor/wiki/Using-Blaze#conditional-attributes-with-no-value-eg-checked-selected
So you should use this form instead, assuming that active_sponsor is the property to look for in the current data context.
Template.whatever.helpers({
isActive:function(){
return this.active_sponsor?"active":"";
}
});
<div class="item {{isActive}}">
</div>