I have an array of links that I need to render into hrefs in the html. Here is what I have, I am itterating through the array with {{#each shipUrl}}:
shipUrl:{["http:urlone.com","http:urltwo.com"]}
Now if I use this:
<div>{{shipUrl}}</div>
It will evaluate to this on the page
[http:urlone.com]
[http:urltwo.com]
But if I put it in an href
<div href="{{shipUrl}}">Click</div>
This renders to [http:urlone.com] ...
What is the correct way to get the index of this object into an href?
The answer was to use {{this}}
In HTML
<div href="{{this}}">Click</div>
Related
Is there a way without going to JavaScript that Spacebars can pass a variable to a modal?
For example, when I try:
<button type="button" id="genbtn" data-toggle="modal" data-target="#entryModal">Pass</button>
{{> newentry var=item}}
It does not work inside the modal:
<template name="newentry">
{{#with var}}It displays here!{{/with}}
<div id="entryModal" class="modal fade" role="dialog">
{{#with var}}Does not display here!{{/with}}
(Rest of modal works just fine)
I can't figure out why the variable can get into the template, but not past the modal. Otherwise the modal's non-var related functions work just fine. Why does this interrupt? Can it be overcome? If so, how?
Note: If this cannot work without going to the JavaScript, I can do it, but it feels like the wrong solution to this problem.
I had the slimier Issue recently so I just share my working example. I am using the below code and it's work perfectly.
{{>userInfo userId=customer._id userType='Customer'}}
then in userInfo template i got the userType as:
<div class="panel panel-{{currentColor ../userType}} user-info">
Please note the ../ before userType. and I am also using userId in js as:
Template.currentData().userId
so that can be used in any way like am doing as a helper
relatedUser: function(){
return Meteor.users.findOne({_id: Template.currentData().userId})
}
hope my examples can help :)
Update
make a helper in newentry Template as :
myReactiveHelper: function(){
return Template.currentData().var
}
and then in your template bind that helper instead of var as :
{{#with myReactiveHelper}}Does not display here!{{/with}}
I think it would be better and simple to use Jquery lightbox_me plugin which wrap your modal into meteor templates.
For example.
$body = $('body')
UI.render Template.release_info, $body[0] //rendering template
$popup = $body.find("#releases-info-popup-container") // modal Id
$popup.lightbox_me
centered: true
destroyOnClose: true
Template
<Template name="release_info">
<div id="releases-info-popup-container">
</div>
</Template>
I'm trying to pass a variable (tag name) into a Handlebars partial and use an #is block helper on the tag but for some reason it just won't play ball. This is my code:
Call to my partial and passing through the tag name.
{{> nav tagged='page' }}
In the partial itself I do the following (tagged is the variable name passed through):
{{#each tags}}
{{#is tag tagged}}
{{#each pages}}
// Do code here
{{/each}}
{{/is}}
{{/each}}
If I just render the tagged variable it displays the variable value as expected so a bit confused as to why its not working.
Thanks.
The issue you have is that the tagged variable is in the parent context but you're trying to reference it within the #each tags loop.
You can reference the parent context with ../ so the working code would be
{{#each tags}}
{{#is tag ../tagged}}
{{#each pages}}
// Do code here
{{/each}}
{{/is}}
{{/each}}
I would like to insert a string that contains a link with a helper (or is there any better option to achieve this?) in meteor blaze.
So far blaze just gives back the link as normal text with the '' tags.
Does anyone have a good solution or workaround for this?
Here is a simple example to get you started :
<template name="parent">
{{> linkTemplate linkData}}
{{#each links}}
{{> linkTemplate}}
{{/each}}
</template>
<template name="linkTemplate">
{{title}}
</template>
Links=new Meteor.Collection(null);
Links.insert({
url:"https://www.google.com",
title:"Google"
});
Template.parent.helpers({
linkData:function(){
return {
url:"https://www.google.com",
title:"Google"
};
},
links:function(){
return Links.find();
}
});
If you want to render a string in a template that happens to contain a link, you would have to provide the HTML string as in
var string="A link to Google.";
Then you can use the triple bracket syntax {{{helperReturningHTMLString}}} and it will work as expected, but I don't think it's good practice unless you're working with something like a WYSIWYG editor.
Handlebar template
<div>
{{contentText}}
</div>
JS
var contentText = {contentText: "<table><tr><td>Some Data<\/td><\/tr><\/table>"}
Handle bars render displays the HTML as string rather than rendering the HTML.
Where am I going wrong ?
From the fine manual:
Handlebars HTML-escapes values returned by a {{expression}}. If you don't want Handlebars to escape a value, use the "triple-stash", {{{.
So if you want to put contentText straight into the template as-is then you want:
<div>
{{{contentText}}}
</div>
in your template.
Demo: http://jsfiddle.net/ambiguous/f7LJ5/
I'm trying to write the following
<iframe src="http://www.youtube.com/embed/videoID"/>
But in Handlebars I'm doing this
{{#each Videos.videosController }}
{{#view}}
<iframe {{bindAttr src="videoId"}}/>
{{/view}}
{{/each}}
The problem is the videoId attribute of my object is just an id and I need to convert it into the full URL so I have written a function to change the property on the object
Videos.VideoView = Ember.View.extend({
content: null,
videosEmbedUrl: function(){
return "http://www.youtube.com/embed" + this.getPath('.video.videoid');
}.property("video")
});
But I'm really confused about how to call that function....
Any pointers very welcome.
There are a couple of different ways you can construct your views. If you are going to set up a view that depends on the data, you'll need to bind the data to the view.
http://jsfiddle.net/crw6g/
{{#each item in model}}
{{#view App.YTVideoView contentBinding="item"}}{{/view}}
{{/each}}