Some properties of my model should be loaded asynchronously (implemented by promises). I don't want to wait it - I want to render it right now and partially update it when promises will be resolved. Does handlebars.js support it?
Handlebars does not support async. This makes it impossible to use Promises for expressions and helpers. You could use await but this suspends execution, so no rendering takes place until the Promise is settled. Other templating frameworks like dust.js offer async functionality.
I think i can propose a workaround to get the async (or promises) to (seem to) work. Below is the example. Essentially this is what i am doing
First return a div with an unique Id (i am using namespace + auto increment here)
Do your processing (ajax or what ever slowly). Once done replace the innerHTML of the div in step1 with new data by accessing it via the unique id
code below. Observe the tripple bracket ({{{ }}}). This is to make sure generated HTML is not escaped
<script id="handlebars-demo" type="text/x-handlebars-template">
<div>
-->> {{{functionName "functionParam" }}} <<--
</div>
</script>
<div id="output" />
<script>
window.id=0;
Handlebars.registerHelper('functionName', function(funcParam ){
let tempId = "my_namespace_" + window.id++;
$.post("https://something.com/abc").done(function(data){
$("#"+tempId ).html(data.something);
}
)
return '<div id='+tempId+'>loading</div>'
});
var template = document.getElementById("handlebars-demo").innerHTML;
var templateScript = Handlebars.compile(template);
var context = { };
var html = templateScript(context);
document.getElementById("output").innerHTML= html;
</script>
Related
I got error message when trying to run existing meteor project.
$meteor
=> Started proxy.
=> Started MongoDB.
=> Errors prevented startup:
While building the application:
client/coinmx.html:169: TRIPLE template tag is not allowed in an HTML attribute
...title="Totals: {{{get...
^
In Meteor 0.8, it's possible to return a Javascript object which is directly rendered into HTML attributes versus earlier versions, where you had to render it yourself.
Old version:
<input name={{name}} title={{title}}>
helpers:
Template.foo.name = "fooName";
Template.foo.title = "fooTitle";
New version:
<input {{attributes}}>
helpers:
Template.foo.attributes = {
name: "fooName",
title: "fooTitle"
};
All of these can be functions, and reactive, etc. Because the object is rendered directly into attributes, there is no need for you to SafeString some manually rendered content as before. This is the recommended way to go if need to render HTML attributes.
See also the following for how conditional attributes work under this scheme:
https://github.com/meteor/meteor/wiki/Using-Blaze#conditional-attributes-with-no-value-eg-checked-selected
The error is pretty much explanatory: you cannot use {{{something}}} inside a HTML attribute, you need to use {{something}} instead. Depending on what the something is (it's not known from your question as you didn't provide the code), that's either all you need to do, or you can achieve similar functionality by returning new Handlebars.SafeString("result") from your helper instead of just "result". However, if you do, you need to be super sure that the thing you'll return won't break the HTML structure.
Hugo's answer above gave me the missing piece I needed for the same issue-- triple stashes in 0.8 no longer supported. Here is an example that hopefully helps.
Where you might have had {{{resolve}}} in your template, you would now do:
<template name='thing'>
<ol>
{{#each all}}
{{resolve}}
{{/each}}
</ol>
<template>
The helper code then makes use of Spacebars.SafeString which looks to be preferred with Blaze:
Template.thing.helpers({
all: function () {
return Things.find();
},
resolve: function () {
var result = "<li>";
for (var i = 0; i < this.arrayOfClassNames.length; ++i)
result += <'div class='" + this.arrayOfClassNames[i] + "'></div>";
result += "</li>";
return new Spacebars.SafeString(result);
}
});
The key here is to return the 'new Spacebars.SafeString(result)' to wrap your HTML (which must be well formed).
I have a sortable list.
<template name="the_playlist">
{{#each main_list}}
<li id="{{index}}" class="list_element">
<div class="next_song">...</div>
<div class="destroy">...</div>
<div class="element_style">{{song_title}}</div>
</li>
{{/each}}
</template>
And this is the main_list that it prints from.
Template.the_playlist.main_list = function(){
//if ret is valid, it will have a songs member
var ret = Links.find().fetch()[0];
if (typeof ret == 'undefined'){
ret = []
}
else {
ret = Links.find().fetch()[0].songs;
}
return ret;
}
And I am using the sortable plugin and more importantly its update callback which updates everytime the user changes a position the list or an element is added to the list.
$(function() {
$( "#playlist" ).sortable({
update: function(){
Template.list.updateList(); //MODIFIES DB CONTENTS, AND MAIN_LIST's VALUES CHANGE
}});
$( "#playlist" ).disableSelection();
});
*The problem: * If a page already has list elements when it's loaded, for one time only, I would like to add a class that hides (.addClass("hide")) each of the next_song elements that are on the page at that time. This *will work only until main_list changes* by a call to Template.list.updateList above, after which automagically, the added class will disappear - most likely due to the re-rendering that is occuring since the main_list depends on the db changes.
The following in the JQuery snippet I use to try and accomplish this.
$("#playlist li .next_song").each(function(){
$(this).addClass("hide_song");
})
Here is a demo. Try plugging in the above JQUery code into the console. and then move the list elements around to see the problem.
Can you not just determine whether that will be the case in a helper function?
Template.the_playlist.helpers({
'list_elements_exist': function() {
return (!!$('#playlist li').length);
}
}
Then you can just insert the logic straight into the template:
<div class="next_song{{#if list_elements_exist}} hide_song{{/if}}">...</div>
To be honest, I'm not 100% sure that this will float with reactivity depending on the structure of your app. If it doesn't work properly, I'd introduce a new session boolean, list_elements, the value of which is returned by the helper function above. It should be fairly easy to update its value in event handlers or created callbacks to keep it tracking whether there are any items in the list or not, and this will guarantee the list renders as required regardless of other dependencies changing.
Why in the following basic example returned collection inside rendered function is empty?
Autopublish is enabled. After the page loads calling command
Coll.find().fetch() inside javascript console returns correct set of entries
Here is the code
t.js
Coll = new Meteor.Collection("coll");
if (Meteor.isClient) {
Template.tpl.rendered = function(){
console.log(Coll.find().fetch()); // <-- This line prints empty array
};
}
if (Meteor.isServer) {
Meteor.startup(function () {
if (Coll.find().count() === 0) {
var f = ["foo","bar"];
for (var i = 0; i < f.length; i++)
Coll.insert({f: f[i]});
}
});
}
And t.html file
<head>
<title>test</title>
</head>
<body>
{{> tpl}}
</body>
<template name="tpl">
Test tpl
</template>
Meteor is built off of a data-on-the wire type structure. This means when the app initially loads the HTML & JS is sent down first and the data later.
You have to use reactivity to check for data changes or check when the subscription to a collection is complete (which entails removing the autopublish package). (You can check out how to move your app to a manual subscription at the docs: http://docs.meteor.com/#publishandsubscribe)
The subscription callback tells you when the data is returned:
Meteor.subscribe("coll", function() {
//Data subscription complete. All data is downloaded
});
A template can also be made reactive (like the way you are doing) but .rendered isnt being called because Meteor first checks to see if a template's html has changed & only if it is different will it change its HTML and call the rendered callback.
What you have as an option here is to 1) use Deps.autorun instead, or
2) I'm not sure why you are using this in your rendered callback but if it is necessary to put it there you need to ensure that the HTML of the template changes, by introducing something into the html from your collection that makes it change when the new data is introduced.
I have a template that looks something like this:
<template name="foo">
<textarea name="text">{{contents}}</textarea>
</template>
I render it with:
Template.foo = function() {
return Foos.find();
}
And I have some event handlers:
Template.foo.events = {
'blur textarea': blurHandler
}
What I want to do is set the rows attribute of the textarea depending on the size of its contents. I realize that I could write a Handlebars helper, but it wouldn't have access to the DOM element being rendered, which would force me to do some unnecessary duplication. What I want, ideally, is for meteor to trigger an event after an element is rendered. Something like:
Template.foo.events = {
'render textarea': sizeTextarea
}
Is this possible?
As of Meteor 0.4.0 it is possible to check if a template has finished rendering, see http://docs.meteor.com/#template_rendered
If I understand your question correctly, you should wrap your textarea resize code inside a Template.foo.onRendered function:
Template.foo.onRendered(function () {
this.attach_textarea();
})
I think the current 'best' way to do this (it's a bit of a hack) is to use Meteor.defer ala Callback after the DOM was updated in Meteor.js.
Geoff is one of the meteor devs, so his word is gospel :)
So in your case, you could do something like:
<textarea id="{{attach_textarea}}">....</textarea>
and
Template.foo.attach_textarea = function() {
if (!this.uuid) this.uuid = Meteor.uuid();
Meteor.defer(function() {
$('#' + this.uuid).whatever();
});
return this.uuid;
}
EDIT
Note, that as 0.4.0, you can do this in a much ad-hoc way (as pointed out by Sander):
Template.foo.rendered = function() {
$(this.find('textarea')).whatever();
}
Since about June 2014, the correct way to do this has been to set a callback using Template.myTemplate.onRendered() .
Yeah I think so - not sure if it's "the right way", but this works for me:
In your app JS, the client section will run whatever javascript there on the client. For example:
if (Meteor.is_client) {
$(function() {
$('textarea').attr('rows' , 12) // or whatever you need to do
})
...
Note the example here uses JQuery, in which case you need to provide this to the client (I think :-). In my case:
I created a /client dir, and added jquery.js file under this.
Hope this helps.
I'm using update panel, my response have some javascript like bellow. After a success response, I need to eval it, load it (with external script)
ex: my html response
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
alert('asd');
</script>
<div>test</div>
<div>blah blah blah</div>
I'm not sure whether this question is still important for you, however I will try to provide a reasonable answer below.
AJAX framework does not evaluate scripts which are returned via UpdatePanel calls. You have to re-attach external scripts to document, so that browser could request for them and evaluate all inline scripts. You can use a small module I have paste below.
var UpdatePanelEnhancer = function ()
{
var divSelector = '#liveArea';
function evaluateScripts()
{
$(divSelector).find('script').each(function ()
{
if (this.src)
{
$('body').append(this);
}
else
{
var content = $(this).html();
eval(content);
}
});
};
Sys.Application.add_load(evaluateScripts);
} ();
The weak part of it is that you have to provide a selector for the element where module should look for a scripts to evaluate ('liveArea' in example), although you can extend the module and provide some cinfiguration to it. Also, I would strongly recommend you to load external javascripts before. If you cannot do it for some reason you should additionally check whether script is already referenced or not to avoid necessary calls and potentially unexpected behaviors and errors .