FAQ Database Discussion Community


Handlebars Template Doesn't Display Data

templates,handlebars,hapijs
My Handlebars template: {{#each .}} {{this}} {{title}}<br> {{author}} {{/each}} Partial Data Example: [ { title:"How We Solve Big Problems By Thinking Small", link:"http://product.hubspot.com/blog/how-our-product-team-thinks-small-to-solve-big-problems", published:"2015-03-05T13:30:00.000Z", author:"[email protected] (Jeff Boulter)", site:"http://product.hubspot.com/blog" }, { title:"4 steps to better goals and metrics", link:"http://engineering.pinterest.com/post/112720487359", published:"2015-03-04T20:56:27.000Z",...

How to re-assign template in emberjs component?

javascript,ember.js,handlebars
What I want is when I click on a link of a component, the template will change dynamically with its subsequent state(some other html codes). What I have done is in init process, every component's template could be displayed dynamically. When I click link Add, Invite or Accept, the property...

How to replace the handlebars with htmlbars in Ember CLI app?

ember.js,ember-data,ember-cli,handlebars,htmlbars
I am facing the following issue after upgrading the Ember and Ember data to the canary versions. Cannot set property 'compilerInfo' of undefined I found the discussion about the issue in Ember CLI repo. https://github.com/ember-cli/ember-cli/issues/2955 The solution is to replace handlebars with htmlbars. But I don't know the exact steps...

how to prevent handlebars “{{}}” from appearing in the UI in an AngularJs Application before actual data loads?

javascript,angularjs,handlebars,ng-bind
I have a page, Whose layout is generated based the GET request that returns an array with length in 10000s. So, until the actual that bind to some of the components load, I get the ugly : {{ binding-model }} This creates a shabby look and feel and I am...

Disabling click triggering on a checkbox inside a div with a click event in Ember

ember.js,handlebars
I have divs created with a #each loop. Each div have a click action and contains a checkbox. I want to prevent the checkbox from triggering the click event of its parent div. I am using Ember.js handlebars. <script type="text/x-handlebars" data-template-name="conversations"> {{#each conv in model itemController='singleconv'}} <div class="conversation-content-wrapper" {{action "clickConv"...

Meteor Spacebars nested tag equivalent

meteor,handlebars,spacebars,meteor-helper
I have a problem. I have a collection of documents in my database, and I would like to display each document depending on whether a session variable corresponding to that document is set. To illustrate my problem, let me give a simplified example. Meteor.myTemplate.helpers({ stuff: [ {name: 'item1'}, {name: 'item2'}...

Multiple layouts with Handlebars and ExpressJS?

node.js,express,template-engine,handlebars
If I'm using Handlebars as my templating engine with Express 4, it seems like there is only the option to specify a single layout template to use for all your views: app.engine('hbs', expressHbs({extname:'hbs', defaultLayout:'layout.hbs'})); What if your app needs multiple layouts? What if viewA.hbs uses one layout and viewB.hbs needs...

Recording values of radio buttons in ember

javascript,ember.js,handlebars,htmlbars
I am fairly new to Ember (using version 0.2.3). I have a component with a few computed values. They gather these computed values from input fields: export default Component.extend({ loanAmount : 200000, deductible : 0, debtInt : 5, getLoanCosts: computed('loanAmount', 'debtInt', function(){ return (get(this, 'debtInt')/12) * get(this, 'loanAmount'); }) On...

Change expression based on url hash - handlebars.js

javascript,url,hash,handlebars
I have just started using handlebars and you can't use Js with the templates so you have to use a helpers(?) or so I have lead myself to believe. I want to change my expression based on URL hash. so if my URL was www.mysite.com/template.html#new I'd want #each to be...

Ember 1.10+grunt+EAK: “Could not find template or view” after migration from 1.9.1

ember.js,handlebars
I'm using Ember App Kit with grunt and I'm trying to switch to Ember 1.10 and can't get HTMLBars working :/ TL;DR After migration, I've got my HTMLBars templates lodaded in Ember.TEMPLATES but they're not visible either by Ember nor in App.__container.lookup.cache. Details The steps I did: updated ember and...

mustache {{{partial}}} vs {{> partial}}

handlebars.js,mustache,handlebars
I have a handlebars/mustache layout file in my node.js application that looks like this: {{> header}} {{> navbar}} {{{body}}} {{> footer-user}} {{> footer}} Since all five lines are includes, is there any difference between the two types of includes? Could I replace {{{body}}} with {{>body}} or {{> header}} with {{{header}}}?...

Rendering dynamically generated {{link-to}} links in an Ember.js Handlebar template expression

javascript,ember.js,ember-cli,handlebars
I have an Ember template that is rendering text with a Handlebar expression, i.e. {{caption}}. The text being rendered has hashtags in it, each of which I need to make clickable, and going to a specific route in the Ember app. I created a helper to parse the text and...

javascript does not function after dom is updated [duplicate]

javascript,handlebars
This question already has an answer here: jQuery doesn't work after content is loaded via AJAX 3 answers I got a webpage that updates its content using ajax/json and handlebars. Now i want to use bootstrap-datepicker for my date fields, but after updating the DOM with handlebars, the javascript...

Meteor/Spacebars Display Placeholder Text When No Documents Match User

javascript,meteor,handlebars,spacebars
I have a script that runs through a collection of photo documents, checks if they match the current user ID, and then renders the template. <ul id="settings-photos"> {{#each photos}} {{#if person}} {{> photo}} {{/if}} {{/each}} </ul> If no photos exist for a user, I would like to display a "Click...

Ember - Nothing handled the action occurs

ember.js,ember-data,handlebars.js,ember-cli,handlebars
Nothing handled the action error occurs for the following code. How to resolve this? I have created a view, an object for my sample app using ember. But the action part is not working. How to bind an action to a view? HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ember...

Override Ember application.hbs template

javascript,ember.js,handlebars.js,ember-cli,handlebars
I have an Ember JS application with 99% of it's resources on the root level, which the user has to be logged in to access. All those resources, with the exception of /login, have the same template. /login, however, has an entirely different template (no nav bar, etc). What's the...

Express 4 handlebars render without layout

node.js,express,handlebars
Is there a way in an express 4 app to render a view without using a layout? I have a layout.hbs inside the project. The file seems to be used without needing to register it anywhere and for most views that is ok, but what if just a single view...

Adding “” to a certain word using handlebars.js

javascript,handlebars.js,handlebars,html-escape
I am using handlebars for JavaScript templating. I want to add around the word "success". I would hopefully want to escape any other html or scripts in the text.

Handlebars helpers inside loop

javascript,handlebars.js,handlebars,handlebarshelper
Template <script id='handlebar-template'> {{#each tags}} {{#isObject this}} <span>Object</span> {{else}} <span>String</span> {{/isObject}} {{/each}} </script> Script <script> Handlebars.registerHelper('isObject', function(o) { return typeof o === "object"; }); var props = {"tags": ["Google"]} var html = $("#handlebar-template").html(); var template = Handlebars.compile(html); console.log(template(props)); </script> Output Expected <span>String</span> Actual Output false else block...

jquery not updating handlebars partial view correctly (express, node.js)

jquery,node.js,express,handlebars
Updated to show how to get this to work. The answer I accepted below didn't really show much code, everything ended up in the comments. So for simplicity, I've shown the correct code here (my original code had 3 errors). I'm using Node.JS with Express and Handlebars. I was having...

Ember JS - Handlebars template - @index being undefined inside #each

javascript,templates,ember.js,ember-cli,handlebars
I looked for a duplicate question but couldn't find one on SO. Hence here it goes. I have an #each block in my template which is successfully printing the values from an array but when I try to get the current index using @index within that block like this -...

Handlebars template won't render ember data object

ruby-on-rails,ember.js,handlebars
I've built an ember front-end app that consumes an API made with rails in another application. The ember app is successfully requesting and receiving data from the rails api and one of my handlebars template (the index page that displays a list of all of the Graduates from my Graduates...

passing backbone collection to view

grails,backbone.js,handlebars
I'm just starting out with backbone / grails and i've been struggling to figure out how to get everything to work. I'm building a pricing configurator where a user selects a product type from radio group A and radio group B containing the quantity / pricing / discount data will...

Registering Handlebars string comparison helper in Ember.js not working

ember.js,handlebars.js,handlebars
I'm trying to implement a string comparison helper in my ember app and I keep getting this error : Uncaught Error: Assertion Failed: A helper named if_eq could not be found I can't believe it's that complicated to compare 2 strings together, it should be a basic but seems like...

Cannot pass variables to a partial in handlebars 3

javascript,handlebars.js,handlebars
Tried to pass variable to a partial without success. Try 1: passing template context "product" template: From template: {{product.name}} <br> {{> product_buttons}} "product_buttons" partial: From partial: {{product.name}} Output: From template: Awesome Steel Shoes <br> [object Object] From partial: We can see 2 problems: the partial does not render the expected...

How to reference a variable outside the current block variable?

javascript,handlebars.js,mustache,handlebars
Say I have two arrays in a structure I'm passing to my template: { days: 'Mon,Tue,Wed,Thu,Fri'.split(','), times: 'Morning,Afternoon,Night'.split(',') } I want to list each day, and for each day, list each time. However, when I reference the times array inside a loop over the days array, it seems to think...

Handlebars: return hash from helper

javascript,backbone.js,coffeescript,handlebars.js,handlebars
Can i return hash from Handlebars helper? I tried this: In my view: initialize: -> super this.hash = {key1: 'test1', key2: 'test2'} Handlebars.registerHelper 'show', => return this.hash In template: {{show.key1}} What am i doing wrong? Thanks!...

Handlebars partial printing [Object object] when rendered

javascript,handlebars.js,handlebars
I'm trying to register a Handlebars partial so that it can be included in another view. I'm using Handlebars 2.0.0. Here's the template: {{> subNav}} <h1>Issue name: {{ name }}</h1> <h2>Issue id: {{ id }}</h2> <section id="issue-sections"> {{#each sections}} <li> {{> sectionsListItem}} </li> {{/each}} </section> Here is the partial: <p>This...

Set a new Variable in Assemble (or combine two comparison helpers)?

html,handlebars,assemble
is there a way to set a new variable in a partial in assemble (assemble.io)? Or is it possible to combine two comparison-helpers, for example: {#is somevar "yes" || anothervar "no"} There's HTML in my partial which should only be shown if one of two different variables is true. If...

Using helpers inside a keypath with ractivejs

javascript,handlebars,ractivejs
I have a function that is called on click of an element and I am comparing two arrays. The first array is printed out to the DOM with an expression that filters the array. Handlebars: {{#each search(~/budgets, searchValue, 'accountName'):i}} <p on-click="compareValues">{{accountName}}</p> {{/each}} JS: Ractive.on('compareValues', function(target) { if(Ractive.get(target.keypath + '.accountName') ===...

Iron:router onBeforeAction isn't impacting the DOM

javascript,jquery,meteor,handlebars,iron-router
I've decided to implement a quick little animation between pages for Meteor. The way I've decided to do this is by using a onBeforeAction hook, to set a DOM element to display:none, and then to animate it in with an onAfterAction. The problem is, the element never disappears off the...

Accepting multiple arguments in a Handlebars helper

javascript,coffeescript,handlebars.js,handlebars,handlebarshelper
I've checked across message boards but have not found an answer to this. My goal is to create a handlebars helper that will check if all arguments passed are true, and if so, display the content. For example: {{#ifAll data.something data.somethingElse data.oneMore}} Show me if all of these arguments exist!...

How can I know which item in a handlebars each loop triggered a function in my Ember controller?

ember.js,ember-data,ember-cli,handlebars
I am new to Ember, and I am trying to set up a list of folders. When you click on the icon next to a folder, it will load (i.e. find('folder', folder_id) ) the child folders. If the top level folder has 16 sub-folders, I am trying to set a...

Meteor: setting Template Title on Render

javascript,meteor,handlebars,iron-router
I have a dynamic line of code: <label>{{title}}</label> //template name="header" I'm using iron:router, the app is super simple right now: Router.configure({ layoutTemplate: 'ApplicationLayout' }) Router.route('/', { template: "home" }) Router.route('/scientific', { template: "scientific" }) I'd like a solution that doesn't rely on Session as a way to dynamically render the...

How to access object from parent in custom if helper?

javascript,backbone-views,handlebars,handlebarshelper
The ../../Message.NotAvailable in the ifequal helper doesn't seem to work but if i provide a string "Hello" to compare with type it works fine and comes inside the loop {{#ifequal type ../../Message.NotAvailable}} <li id="{{id}}"><a href="#">{{../../../Message.NotAvailable}}</a> </li> {{/ifequal}} My helper: Handlebars.registerHelper('ifequal', function(value1, value2, options) { if(value1 === value2) { return options.fn(this);...

HBS template with grunt-dr-svg-sprites

javascript,templates,gruntjs,handlebars
I'm using grunt to generate sprite SVG image (with PNG fallback) from separated SVG files and a (s)css file for the generated icons. For this process I'm using the grunt-dr-svg-sprites and the template is using Handlebars syntax. The idea of the structure what I would like to achieve is this:...

Handlebars.js embed literal json object in data tag

javascript,jquery,json,handlebars.js,handlebars
I've recently started to use Handlebars.js and so far I'm loving it! On my current project, I'm storing a bunch of literal values in data attributes. I'm wondering if there is a way store the full JSON object in a tag for later use. Current {{#each this}} <tr data-id="{{Id}}" data-prod-code="{{ProductCode1}}"...

Ember-CLI Route model data not affecting template

javascript,ember.js,ember-cli,handlebars
I have an ember route webtest contained within the file routes/webtest.js: export default Ember.Route.extend({ model: function() { return { title: "Does not appear" }; } }); I have the matching template contained within templates/webtest.hbs <div class="container"> <h2>Title: {{title}}</h2> </div> when I navigate to the page /webtest in my web browser...

Mustache: only show if key has non-false value

mustache,handlebars
In a Mustache template, how can I show a block containing a value only when said value is a non-false value? I need to be able to show or not show an entire block, not just the value. For example, in Handlebars: {{#if name}} Hi {{name}}! {{/if}} But in Mustache,...

metalsmith-collections 'path' key not accessible from Handlebars template?

handlebars,metalsmith
My template: {{#each collections }} <span class="Category__Title">{{ @key }}</span> {{#each this }} <a href="{{ this.path }}">{{ this.title }}</a> {{/each}} {{/each}} Renders ( this.path is undefined ): <span class="Category__Title">French</span> <a href="">Braised vegetables</a> <span class="Category__Title">Thai</span> <a href="">Rice noodles</a> I'm using metalsmith: metalsmith .use(collections()) .use(markdown()) .use(templates({ engine: 'handlebars', directory:...