I'd like to literally display a template as code in a meteor app. Something like below:
<template name="current-template">
<pre>
<code>
<template name="template-should-display-as-code">
{{> TMCODE shouldDisplayAsIs}}
</template>
</code>
</pre>
</template>
The template inside the code section should be displayed as code. It shouldn't refer to another template. It is illegal syntax anyway.
Is there anyway to achieve it?
Thanks.
This might help..
Display source code in meteor applications
http://www.meteormade.com/display-source-code-in-meteor-applications
Related
How to use parameter in handlebar partial I am using grunt-assemble and cant find anything in docs
For Example I will create a partial name heading and use it in my template
<h1 class="tac mt-80 underline">
{{heading}}
</h1>
<body>
{{> heading "Test"}}
</body>
unfortunately, thats not possible with grunt-assemble out of the box.
Their recommended way is to use the parseJSON helper for that:
{{#parseJSON '{"heading": "TEST"}'}}
{{> heading }}
{{/parseJSON}}
But you should take a look at the current implementation of assemble, which includes a updated version of Handlebars (which provides your wished functionality). It seems like they moved away from Grunt in favor of compatibility with Gulp.
I use assemble.io to generate some static files for a simple webpage.
Now i would like to define a list of partials in YAML Front Matter that should be included in the generated page.
I want this
<div class="slides">
{{>slide-intro}}
{{>slide-welcome}}
{{>slide-goodbye}}
</div>
to be replaced by something like this:
---
slides:
- slide-intro
- slide-welcome
- slide-goodbye
---
<div class="slides">
{{#each slides}}
{{>this}}
{{/each}}
</div>
So, I want to use the variable content stored in this(e.g. slide-welcome) to be used as the name of a partial to be included.
I see that using {{>this}} is not working, but i have no clue where to look for the solution.
Can anybody help me out?
Handlebars 3 introduced Dynamic Partials and you would use them like this:
---
slides:
- slide-intro
- slide-welcome
- slide-goodbye
---
<div class="slides">
{{#each slides}}
{{> (lookup ../slides #index) }}
{{/each}}
</div>
However, assemble 0.4.x is using Handlebars 1, so switch to grunt-assemble, which uses Handlebars 3. grunt-assemble is the same code based, it's just been moved to reflect that it's a grunt plugin.
I'm creating a Meteor application. When first creating application, Meteor has put this sample code in hello.html
<head>
<title>hello</title>
</head>
<body>
<h1>Welcome to Meteor!</h1>
{{> hello}}
</body>
<template name="hello">
Hello World Template
</template>
I install Iron-Router package. then here is my lib/Router.js file:
Router.route('/', function () {
this.render('post_template');
});
And here is my client/templates/posts/post_template.html
<template name="post_template">
Example Template
</template>
I don't know why when I run this application. The result is:
HelloWorld Template
Example Template
In other word, which part of Meteor's configuration that load hello.html as default page, and then append all other templates in routing inside ?
Thanks :)
In this case the very first Meteor loads is the
<body>
<h1>Welcome to Meteor!</h1>
{{> hello}}
</body>
Since you are calling there the hello template, thats the first you get on the screen.
I reccomend on this case use the layout template and remove the <body> tag
So first declare the route.
Router.configure({
layoutTemplate:'layout'
})
delete the <body> and <head> tags and place this layout template instead.
<template name="layout">
<navbar>
<!-- This stuff will be available on all routes since you are declaring on the layout template -->
</navbar>
{{> yield}} <!-- this yield helper will render the post_template or any other -->
</template>
For example
If you have this 2 routes.
Router.route('/', function () {
this.render('post_template');
});
Router.route('/example', function () {
this.render('example');
});
What happened here, when you go through the / route, iron router will render the 'post_template' html into the layout template, and when you navigate to /example, iron router will remove the post_Template html and render the content inside /example template, if you want to have the same content on all pages, declare it on the <layout> template i.e footers,navbars, etc
The layout template its like the "master" template here.
IR will append to the <body> if it exists (and otherwise add one for you) so it's recommended that you remove the entire <body> tag.
You are actually safe to remove the hello.html entirely (since you also don't need the hello template). If you want to keep the head tag, you could just modify the file to look like:
<head>
<title>hello</title>
</head>
To understand why hello.html is being included, see the Structuring your application section of your docs:
HTML files in a Meteor application are treated quite a bit differently from a server-side framework. Meteor scans all the HTML files in your directory for three top-level elements: <head>, <body>, and <template>. The head and body sections are separately concatenated into a single head and body, which are transmitted to the client on initial page load.
So all of your html files are always included. If you don't want to include them, you need to remove them from your app.
I've got a very simple template problem going on that appears to be similar to this guy's problem, though I've tried to build a simple example to demonstrate the problem and hopefully have someone explain to me how to fix or work around it.
Although as I'm doing some online research, it may be that the official documentation is out of date with the code. The reason I haven't bought into accepting that just yet is that the problem seems to have existed for a while, the dates on such articles in forums appears to be fairly old, and there's talk of it being fixed. There's also talk the feature is gone. What's the new way, if there is one?
I'm using Meteor 0.9.0.1 with iron:router 0.9.1. Specifically, I set up my project like this:
$ meteor create ironTest
$ cd ironTest
$ meteor add iron:router
$ meteor
Pointing my browser at http://localhost:3000/ as instructed, shows the default project. So far so good.
Now make ironTest.html contain this:
<body>
<h1>Before</h1>
{{renderRouter}}
<h2>Afterward</h2>
</body>
<template name="hello">
Hello Template
</template>
<template name="goodbye">
Goodbye Template
</template>
Make ironTest.js contain this:
Router.configure({
autoRender: true // we will experiment with this Boolean shortly
});
Router.map(function () {
this.route('hello');
this.route('goodbye');
});
If you go to the routes http://localhost:3000/hello and http://localhost:3000/goodbye, you'll see the templates correctly render as expected and documented, appended to the <body> element, so it appears after the <h2> element.
According to the current documentation for iron:router, one should be able to set the autoRender property to false, and the template should no longer be appended to the <body> element, but rather be injected where the Handlebars (okay, Spacebars) element {{renderRouter}} is, that is, between the <h1> and <h2> elements.
When I try this, visually it doesn't do anything. Opening a JavaScript Console to look at errors shows none. Although, by deliberately going to an invalid route it will show a missing template router exception, showing the routing code is indeed working.
Does anyone know how to coerce the code above into working?
For the curious, I've got a working simplistic equivalent that might be of use to others working this problem.
This new ironTest.html uses a template (for a layout) with no <body>:
<template name="main">
<h1>Before</h1>
{{> yield}}
<h2>Afterward</h2>
</template>
<template name="hello">
Hello Template
</template>
<template name="goodbye">
Goodbye Template
</template>
This ironTest.js instead uses a layout:
Router.configure({
layoutTemplate : 'main'
});
Router.map(function () {
this.route('hello');
this.route('goodbye');
});
It's worth an aside that this solution doesn't work for me, as I don't want a global layout, and have concern that riddling layouts in the route themselves is a tighter coupling than desired for my purposes.
I'm currently looking for a way to dump debugging log information from the Router as it performs transitions, but that's another story.
Im using Jade for copiling to valid handlebars html, which will be used in Meteor. I need the resulting html to look like this:
<input type="checkbox" {{#if this.isImportant}}checked{{/if}} title="Mark as important" />
The only way I know it can be achieved is to insert the desired html directly into the jade file. But it doesn't seem to be the right way to do it.
I hope you can show me the right jade code for achieving this.
Thanks!
The straightforward but very repetitive way is just to do this:
{{#if this.isImportant}}
input(type='checkbox', title='Mark as important', checked)
{{else}}
input(type='checkbox', title='Mark as important')
{{/if}}
If you had several of these on a page you could define a mixin to avoid typing all of that out. Alternatively you could use jquery to set/unset the checked property as appropriate.