last day (16 days later) » 

3:57 AM
0
A: How do I insert a canvas into Handlebars.js template

Marcos CasagrandeRemove your inner script in your template: <script id="write-tpl" type="text/x-handlebars-template"> <script id="write-tpl" type="text/x-handlebars-template"> <canvas data-processing-sources="processing.pde" width="{{width}}" height="{{height}}" style="background:{{background}};"><...

 
Are you putting your script in the head tag?. Maybe the script needs to be run inside the template?
 
Yep, the script is in the head, but that won't change a thing. What are you using jQuery, or what to render handlebars, Can you show me your full code?
 
I updated my question to include more code.
 
Just to be clear, you want the result to be as in my example?
 
I'd like to run the .pde file attached to the canvas, as per: processingjs.org/articles/jsQuickStart.html#whyprocessingjs, but yes, I feel like your solution should yield the proper result, but it just doesn't for me. I wonder if it's somehow more involved. Frankly it may require looking at my actual website to understand what's going on, but that would be a more complex process potentially.
 
3:57 AM
Let me see that example.
Are you including processing.js before compiling handlebars? You should do that if not.
 
I wasn't, but changing it didn't do anything.
 
Hey
Is it not possible for me to check your site, isn't it?
 
hey man thanks for helping me out
you actually can if you would like
its still heavily under development but i will upload quickly
www.hypercycle.co/beta
you have to make a quick account, then click the broken profile picture in top right, "create something new"
you can log in with "user: test123, pass: test123"
funny it actually works when i don't use the {{background}} include, but just set it manually background: #000
 
Ok, I'm in, Just test something: wrap the compile code, my javascript example, into $(document).ready(function(){ });
 
but the processing file doesnt load
okay
i tried, nothing
 
4:03 AM
Ok, where is your file: processing.pde
I can't find it in the server, maybe that's why.
 
it's in there
for some reason the tags dont work
{{background}}, etc. but when i type background: #000 it shows black
im not sure thats related to processing not working though
 
hmmm
your code isn't wrapped within $(document).ready
You have some havascript error while parsing handlebars because of that.
$(document).ready(function(){ });
 
which code?
the one you provided?
 
); is missing at the end
 
lol one sec
 
4:09 AM
$( document ).ready(function() {
var data = {
width: 200,
height: 100,
background: "#000"
};

var template = Handlebars.compile($("#write-tpl").html());

document.body.innerHTML = template(data);
});
this code
$("#write-tpl") doesn't exist.
Can I have the .pde file, so I make you a working example?
 
The requested URL /beta/processing.pde was not found on this server.
nop..
That's what I was trying to tell you, I couldn't get the file, maybe processing can't get it either
 
the heck
weird. it opens fine for me
 
I see it now.
 
4:17 AM
Ok, I have it working in my localserver, one second.
 
awesome
 
Do you mind if I post your pde file to stackoverflow or is it not public?
 
go for it
hopefully it helps somebody else
 
Ok, give me 5, since I can get a processing.js from the internet
Couldn't since it's crossdomain, but I pasted my working example. Use that file separated and you'll have it working!
Than just start putting it together in your code
Have you tested it? i.imgur.com/D6JyKjr.png
 
hey
one moment
 
4:31 AM
tell me
 
okay i will
one sec
ya sorry it still doesnt work
it's because im rendering it inside the template
it must be more complicated
 
But what isn't it working?
I gave you a working sample.
 
<script id="master-tpl" type="text/x-handlebars-template">

<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
<!-- $sidebar -->
</div>

<div class="container">
<div class="section">

<div class="main-container">
<!-- $container -->
</div>

</div>
</div>
it's probably because my write-tpl loads into the main-container inside master-tpl
there's something else going on
the working sample works but not for my project i suppose
 
hmmm
Handme your website link again, i lost it
nevermind, got it
You have a syntax error, open developers console and fix it
 
kk
havent uploaded
 
4:44 AM
How can I test it?
when do you parse your template, what action do I need to make
 
file:///D:/hypercycle/parse-js-blog-master/js/blog.js
 
I'm seeing that file, you have an error
 
oh i see
how about now?
 
please fix it, it is quite late here :)
 
lol okay
 
4:48 AM
Not trying to rush you, was kidding :P
 
haha okay
i removed the line but it doesnt seem to do anything. i think that was unrelated
 
What do I have to do, what action in order to trigger the handlebars compile?
 
file:///D:/hypercycle/parse-js-blog-master/test.html
www.hypercycle.co/beta/test.html
see your example works
i'm not sure what you mean, which action?
 
In your website, where I'm supposed to view that.
 
to hit write-tpl?
 
4:52 AM
exactly
 
well you should just hit the button "create something new"
in profile
 
I don't see any handlebars template there
where are they?
 
i don't think it works directly
hypercycle.co/beta/#admin
then hit "create something new" button
 
Yeah I do that, but it does nothing, you're not triggering anything
It has nothing to do with handlebars or your question in SO. that code isn't running.
I don't see any handlebars template there...
 
??
how so?
 
4:56 AM
 
...
 
You can't compile something that isn't there
 
but it must be
what browser are you using?
does the content show up at all though?
 
<script id="write-tpl" type="text/x-handlebars-template">

<nav>
<div class="nav-wrapper blue">
<div class="col s12" style="margin-left: 10px;">
<a href="#!" class="breadcrumb"><a href="#/admin">Back to My Gallery</a></a>
<span class="breadcrumb">Create New Design</span>
</div>
</div>
</nav><br><br>

<h2>Create Something New</h2>

<canvas data-processing-sources="processing.pde" width="{{width}}" height="{{height}}" style="{{background}}"></canvas>

<div id="content"></div>

<form class="form-write" role="form">
 
4:57 AM
 
ya
but it's not compiling?
that white block is where the canvas should be
 
I just don't see that code block you pasted here
open developers console, and try to find the script
 
can you see master-tpl?
 
Ok, try to get your templates working, its 2 AM here.
 
lol
thanks for your help either way
 
5:00 AM
I gotta get some sleep, I work at morning, I'll continue to help you tomorrow
 
okay cool
 
Anyway, my answer in SO is correct, you have something else going on, non related to your question.
 
my email is martin.erlic@gmail.com if you need to get in contact
ya true, i marked it correct because it works
 
So if you can upvote/mark accepted, I'll appreciate it.
Anyway, where are you from? So I know what time is it over there.
 
vancouver
pst
same as san fran
 
5:02 AM
Ok, 21:02 now
I'm from Buenos Aires.
 
cool
 
I'll contact you tomorrow, try to get the templates to show in the web
 
sweet!
 
And throw some console.logs over there, to see if you can see what part of the code isn't running
 
cheers
what's the best way to do that in inspector?
i'm not super familiar with google chrome
 
5:04 AM
Open f12
well, press f12, the developers console will open
every console.log("foo") you throw, you will see it in the console tab
 
okay man cheers ttyl
 
Well cheers, I'll try to get a hold of you tomorrow
I'll probably start a chat here in stack overflow
Maybe this chat will still be here, don't know how it really works though.
Bye man, good luck debugging
 
haha thanks
 
And I just realized, I solved your answer yesterday.
2
Q: Login state dependent menu using handlebars.js

bluemunchI'm trying to apply the following logic: var LoggedOutMenuView = Parse.View.extend({ template: Handlebars.compile($('#menu-logged-out-tpl').html()), render: function(){ this.$el.html(this.template()); } }); var LoggedInMenuView = Parse.View.extend({ template: Handlebars....

:P
 
5:17 AM
lol
you're a handlebars wizard
i'm trying to figure it out haha
 
 
1 hour later…
6:43 AM
ya it is definitely something else to do with the templates
 
 
8 hours later…
2:17 PM
if you see in the footer the processing works fine
 

  last day (16 days later) »