In Bigcommerce's Stencil object model docs : here is the link
I am not seeing any reference to a basic page's id. Though I can see the "pageID" shown when hovering over the page name in the admin interface.
Is this pageID value accessible through Handlebars at all?
Currently it seems it's only possible to get the pageid for the page you are viewing. This probably isn't what you need. You probably want the pageid for every page in the pages list. Hopefully they can add that soon. However, just in case it helps you, this is how I'm getting the pageid for the page that is currently being viewed:
{{#each breadcrumbs}}
{{#if #last}}
{{this.pageid}}
{{/if}}
{{/each}}
I'm using this method to load a specific stylesheet based on the page. I have a mapping of stylesheets for each page in config.json:
"settings": {
"page_stylesheets": {
"151": {"file_name": "my-custom-stylesheet.css"}
}
I added a block in the of templates/layouts/base.html:
{{#block "pageStyles"}} {{/block}}
Then, at the top of my templates/pages/page.html file, I have the following:
{{#partial "pageStyles"}}
{{#each breadcrumbs}}
{{#if #last}}
{{#with (lookup ../../theme_settings.page_stylesheets this.pageid)}}
{{{stylesheet (concat 'assets/css/' this.file_name)}}}
{{/with}}
{{/if}}
{{/each}}
{{/partial}}
Related
i have started using meteor/blaze/FlowRouter recently and stuck on one issue
i need to display my custom loader div which will be shown whenever page template is in transition mode like loading content or requesting data from api or search users data etc
is there any way do to it in one place ? ... i don't want to add html content of loader in every page and handle it by function calling as it will be repetition of code
You can use percolate:momentum package from atmosphere.
First, install momentum:
meteor add percolate:momentum
Then, create a layout template:
<template name="appBody">
{{#momentum plugin="fade"}}
{{#if Template.subscriptionsReady}}
{{> Template.dynamic template=main}}
{{else}}
{{> AppLoading}}
{{/if}}
{{/momentum}}
</template>
If your subscriptions is ready, then Blaze will render template {main} specified in router. Otherwise, will render your AppLoading Template.
And you need to create the AppLoading template too:
<template name="AppLoading">
<!-- Your Loading div here -->
</template>
<template name="orderForm">
{{> photographyServicesForm}}
{{> videographyServicesForm}}
{{> onlineProductsForm}}
</template>
If I go to the orderForm page is there a way to get the data inside of the orderForm Blaze template instance when I'm in Chrome Console? I know how to get it inside the orderForm callbacks, events, helpers, and inside the HTML, but I want to be able to easily check up on it and even update it from the Chrome Console.
I also know that there are four different template instances when I go to this orderForm. Obviously Template.orderForm doesn't work because it's not the current template instance.
EDIT
Here's the answer:
<template name="orderForm">
<div id="orderForm">
{{> photographyServicesForm}}
{{> videographyServicesForm}}
{{> onlineProductsForm}}
</div>
</template>
Blaze.getData($('#orderForm')[0])
It should be noted that the same data available on the orderForm template is also available to its child templates - photographyServicesForm, videographyServicesForm, onlineProductsForm
You want to check out Blaze.getData and Blaze.getView.
With Blaze.getData you can simply do this:
Blaze.getData(document.querySelector('.someelement'))
This works pretty well, but you have to have an element inside the template-instance you can query for.
I have a project that involves a dozen routes, all of which require a navbar and various other pieces that I would like to include in my layout template.
My issue is that I have one and only one page that doesn't need a navbar. I could solve this by taking the navbar out of the layout template and putting the navbar manually in every page that needs it, but that doesn't seem like an elegant solution.
Is there a way to exclude a particular route from including a piece of the layout template?
Why not assigning this particular route another layout who doesn't include the navbar then ?
HTML
<template name="mainLayout">
{{> navbar}}
{{> yield}}
{{> footer}}
</template>
<template name="withoutNavbarLayout">
{{> yield}}
{{> footer}}
</template>
JS
Router.configure({
layoutTemplate:"mainLayout"
});
Router.route("/withoutNavbar",{
layoutTemplate:"withoutNavbarLayout"
});
Here is another simple solution to the problem.
Just set the layoutTemplate to null for the specified page you want to exclude layout. For example, here we will remove the layout and navigation for the login page:
Router.route('login', {
layoutTemplate: '' //set the layoutTemplate to null for the login route
});
Hope it helps.
I am using Meteor 0.5.2 and trying to solve what seems to me is an obvious pattern that should have an easy solution.
I have a template that should return different chunk of data in each of template instances.
For example - I have a template showing TV program - show by show.
Then I need to display two instances of the same template with different data - one with past shows and one with upcoming shows.
So I have a tv program template:
<template name="tv_program">
{{#each shows}}
...
</template>
Ideally I would like do something like:
{{> tv_program past_shows}}
...
{{> tv_program upcoming_shows}}
to pass a parameter to tv_program template instance that I can read from JavaScript and adjust the mongo queries.
Currently I have copy/pasted my template/js code and adjusted the mongo queries but there has to be a better way.
I looked into partials/helpers with arguments but that doesn't seem to be the solution to my problem.
Thanks, Vladimir
You're approaching the problem at the wrong level. Rather than trying to tell your code what to do from your templates, you should tell your template what to do from your code. For instance:
Template.past_shows.shows = function() { return shows(-1); }
Template.upcoming_shows.shows = function() { return shows(1); }
function shows(order) {
return Shows.find({}, {$sort: order});
}
<template name="past_shows">
{{#each shows}}
{{> show}}
{{/each}}
</template>
<template name="upcoming_shows">
{{#each shows}}
{{> show}}
{{/each}}
</template>
<template name="show">
<li>{{_id}}: {{name}}</li>
</template>
If you are using a state machine for your app, such as meteor-router, you can use one template and populate it with upcoming or past shows depending on app state.
Is there a variable passed into every handlebar.js template that contains all the context content that is accessible by the template?
e.g. I'm creating a template, but I don't know all the context content accessible by the template. I want to be able to type into the template {{ debug }} and handlebars.js will spit out all the context content into the HTML
You can use the following code to iterate through this object:
{{#each this}}
{{#key}}: {{this}}
{{/each}}
or a similar piece of code iterating through #root object:
{{#each #root}}
{{#key}}: {{this}}
{{/each}}
Handlebars has built-in helper log.
You just need to set logging level to DEBUG.
Handlebars.logger.level = 0;
Then use helper:
{{log this}}
EDIT: Sorry, this will not write context to HTML, helper uses console.log. For outputting to HTML you need to write custom helper that will use for example JSON.stringify.
Though this question is somewhat old, someone might find this usefull. You can just dump the handlebars current context into plain text with;
{{{.}}}