i have create one html help page like CMS and stored in database.
<content>
Contact us
</content>
In html file write this code
{{{helpPage}}}
Is it possible call dynamicUrl in html right now in <a> tag show
Contact us
I think the issue is that you want to be able to parse Spacebars template tags from a template string? If so,
Add carlevans719:dynamic-templates, then change
{{{helpPage}}}
to:
{{Template.dynamic template=dynamicTemplate}}
And in your template helpers, add:
dynamicTemplate: function () {
var content = getContentFromDB();
var template = new DynamicTemplate(content);
return template.name;
}
See: https://atmospherejs.com/carlevans719/dynamic-templates
Related
I have a next a method how compile and set in DOM my html:
export function initHTMLOperator(container) {
if (container.template) {
const template = SF.handlebars.compile(container.template);
const html = template(container);
const elem = document.getElementsByTagName(container.id)[0];
elem.innerHTML = html; // set compiled template
}
}
container.template has a template
container - it is object with variables for template.
After compilation I set html in DOM.
But i have a problem when changing input i recompile template and losing focus.
Is it possible to update a template in the DOM without innerHTML?
I mean update template but not set full html, only changes.
What you want is something like react and not handlebars then, you should use a virtual DOM and apply only changes, but handlebars doesn't provide such functionality. So no if you want your new template then you have to replace the whole content with something like innerHTML. But if the only problem is loosing your focus you can save it before replacing your content and reset the focus once the template has been replaced.
I need to set a variable or array in meteor JS which whenever changes. Wherever it is used on the page changes.
So far I have tried to set values in session.
let in = Session.get("in");
and this in HTML. The following works fine. This changes whenever it detects a change in array
{{#each in}}
<span class="selectable-tags"> {{this}} </span>
{{/each}}
But whenever I try to add these tags to other div using following. Then the ones added to other div does not change.
"click .selectable-tags"(e, t) {
// sets the tags inside the Method box on click
var el = e.target.cloneNode(true);
el.setAttribute('contenteditable', false);
document.querySelector('[contenteditable]').appendChild(el); },
using meteor with blaze UI. This can be used as reference link
Edit: Session.get or set is given for reference . This was to tell that these values are changing as they on any event triggered wherever set.
You need to add a helper that returns the session variable and show the helper in your html code :
Template.yourtemplate.helpers({
inHelper: ()=> {
return Session.get('in');
}
)}
And in html :
<div>{{inHelper}}</div>
Every modification on in by Session.set('in', newValue) will change your HTML.
I've navigation menu and I would like to display the helper menu button only when the user is on specific page and be hided on others.
I've tried this way, but that doest worked
{{#if Store}}
Filters
{{/if}}
Can you please suggest how achieve this function?
in your template helper, you can lookup the route name with
Router.current().route.getName()
then you can set a helper variable to lookup if you are on this page.
Template.mytemplate.helpers({
'Store': function() {
return Router.current().route.getName() == 'Store'; //the Route name
}
});
then use the Store variable in your template as you did.
I'm using Meteor 0.8 with Blaze and I want to attach events dynamically to HTML contents generated using UI.toHTML of a template. The functionality I am looking for is the alternative to Spark.attachEvents in Blaze.
What I have done so far is that I have created the following template to be used like a widget/component.
<template name="postLinks">
<div id="link-popover-wrapper" >
<ul class="link-popover">
{{#each linkOptions}}
<li><a tabindex="-1" class="link-action" id="link-{{value}}" href="#">{{label}}</a>
</li>
{{/each}}
</ul>
</div>
</template>
And the template is used in Helper of the myPostItem template.
Template.myPostItem.events({
'click .post-item-link-picker': function (evt, tmpl) {
var tempData = {linkOptions:[{label:'Favorite', value : 'favorite'}, ...]};
// Get the HTML content of the template passing data
var linkContent = UI.toHTML(Template['postLinks'].extend({data: function () { return tempData; }}));
// Attach events to the linkContent like in Spark
/*Spark.attachEvents({
'click link-action': function (e, tmpl) {
alert("Component item click");
}
}, linkContent);*/
// Popover the content using Bootstrap popover function
}
});
So my requirement is to attach events to a dynamically generated HTML contents.in the linkContent like Spark.attachEvents after the following line as mentioned in above code.
var linkContent = UI.toHTML(Template['postLinks'].extend({data: function () { return tempData; }}));
Hope somebody can help to find a way to do this in Meteor 0.8 with Blaze.
The reason that Spark-generated HTML could be directly inserted into the DOM is because it had "landmarks" - annotations that could be processed into events and handlers when the DOM nodes were materialized.
Blaze works differently - it inserts a UI component into the DOM directly and attaches events, using the UI.render function. It cannot directly attach template events to the DOM if you use UI.toHTML because there are none of the annotations that Spark had for doing this.
I'm also using Bootstrap popovers in my app, and as far as I know there's no clean way to insert reactive content into a popover. However, you can approximate it with a hack in the following way:
In the content callback of the popover, render the template with UI.toHTML - a nonreactive version of the content. This is necessary because otherwise the popover won't be sized and positioned properly.
Using a Meteor.defer call, replace the popover contents with reactive content, so they'll continue updating while the popover is open.
Because Bootstrap uses jQuery, you should be fine with removing reactive logic properly, for now. Future versions of Meteor will probably have easier ways to do this.
I'm using dust.js to do a client side templating. I would like to use a javascript function in my template, the function would get it's argument during templating i.e
Ex:
mytemplate = " <span> Hi getName({id}) </span>"
myjson = { id : 1 }
In this case, both the template and json-data are sent from server and templating happens on client side.
In the above example, I would get the 'id' from json data and want to display the name of user corresponding to that id.
I'm new to templating. I would like to know how this can be done using dust.js.
Thank you :)
This can be done with Dust.js by creating a script block within your template:
{! Dust template !}
<script type="text/javascript">
var userName = getName('{id|s|J');
// Do whatever you want with the username
</script>
Note, the |s|j, which is important for security filtering.
In your particular use case, however, it would probably be better to just send the user's name and id in the JSON:
{! Dust template !}
<span id="user-{id}"> Hi {name} </span>
// JSON
{
id: 1,
name: smfoote
}