Passing variables through handlebars partial

Question

I m currently dealing with handlebars js in an express js application  To keep things modular  I split all my templates in partials   My problem  I couldn t find a way to pass variables through an partial invocation  Let s say I have a partial which looks like this    lt div id myPartial gt       lt h1 gt Headline lt h1 gt       lt p gt Lorem ipsum lt  p gt   lt  div gt    Let s assume I registered this partial with the name  myPartial   In another template I can then say something like    lt section gt         gt  myPartial    lt  section gt    This works fine  the partial will be rendered as expected and I m a happy developer  But what I now need  is a way to pass different variables throught this invocation  to check within a partial for example  if a headline is given or not  Something like    lt div id myPartial gt         if headline        lt h1 gt   headline   lt  h1 gt         if        lt p gt Lorem Ipsum lt  p gt   lt  div gt    And the invokation should look something like this    lt section gt         gt  myPartial  headline   Headline     lt  section gt    or so   I know  that I m able to define all the data I need  before I render a template  But I need a way to do it like just explained  Is there a possible way

User · Answer

Not sure if this is helpful but here s an example of Handlebars template with dynamic parameters passed to an inline RadioButtons partial and the client browser  rendering the radio buttons in the container    For my use it s rendered with Handlebars on the server and lets the client finish it up  With it a forms tool can provide inline data within Handlebars without helpers   Note   This example requires jQuery      inline  RadioButtons      name   Buttons lt hr gt   lt div id  key-   name     gt  lt  div gt   lt script gt       buttons    map  o   gt           key-  name     append               lt button class  checkbox  gt            lt input name     name     type  radio  value    o value      gt   o text          lt  button gt                      A little test script       key-   name     checkbox   on  click  function          alert    input  this  val            lt  script gt     inline      gt RadioButtons name  Radio  buttons      value 1 text  One      value 2 text  Two       value 3 text  Three

User · Answer

Handlebars partials take a second parameter which becomes the context for the partial      gt  person this     In versions v2 0 0 alpha and later  you can also pass a hash of named parameters      gt  person headline  Headline      You can see the tests for these scenarios  https   github com wycats handlebars js blob ce74c36118ffed1779889d97e6a2a1028ae61510 spec qunit spec js L456-L462 https   github com wycats handlebars js blob e290ec24f131f89ddf2c6aeb707a4884d41c3c6d spec partials js L26-L32

User · Answer

This can also be done in later versions of handlebars using the key value notation       gt  mypartial foo  bar       Allowing you to pass specific values to your partial context   Reference  Context different for partial  182

User · Answer

This is very possible if you write your own helper  We are using a custom   helper to accomplish this type of interaction  and more                               Adds support for passing arguments to partials  Arguments are merged with  the context for rendering only  non destructive   Use   token  syntax to  replace parts of the template path  Tokens are replace in order   USAGE       path to partial  context newContext foo  bar     USAGE       path  1  2  replaceOne replaceTwo foo  bar                                         Handlebars registerHelper      function partial        var values  opts  done  value  context      if   partial            console error  No partial name given               values   Array prototype slice call arguments  1       opts   values pop        while   done            value   values pop            if  value                partial   partial replace            value                     else               done   true                      partial   Handlebars partials partial       if   partial            return               context     extend     opts context  this    omit opts   context    fn    inverse         return new Handlebars SafeString  partial context

User · Answer

The accepted answer works great if you just want to use a different context in your partial  However  it doesn t let you reference any of the parent context  To pass in multiple arguments  you need to write your own helper  Here s a working helper for Handlebars 2 0 0  the other answer works for versions  lt 2 0 0    Handlebars registerHelper  renderPartial   function partialName  options        if   partialName            console error  No partial name given             return               var partial   Handlebars partials partialName       if   partial            console error  Couldnt find the compiled partial      partialName           return               return new Handlebars SafeString  partial options hash           Then in your template  you can do something like     renderPartial  myPartialName  foo this bar    bar     And in your partial  you ll be able to access those values as context like    lt div id   bar id   gt   foo   lt  div gt

User · Answer

Just in case  here is what I did to get partial arguments  kind of  I   ve created a little helper that takes a partial name and a hash of parameters that will be passed to the partial   Handlebars registerHelper  render   function partialId  options      var selector    script type  text x-handlebars-template       partialId        source     selector  html          html   Handlebars compile source  options hash      return new Handlebars SafeString html         The key thing here is that Handlebars helpers accept a Ruby-like hash of arguments  In the helper code they come as part of the function   s last argument   options    in its hash member  This way you can receive the first argument   the partial name   and get the data after that   Then  you probably want to return a Handlebars SafeString from the helper or use    triple-stash             to prevent it from double escaping   Here is a more or less complete usage scenario      lt script id  text-field  type  text x-handlebars-template  gt     lt label for    id    gt   label   lt  label gt     lt input type  text  id    id     gt   lt  script gt    lt script id  checkbox-field  type  text x-handlebars-template  gt     lt label for    id    gt   label   lt  label gt     lt input type  checkbox  id    id     gt   lt  script gt    lt script id  form-template  type  text x-handlebars-template  gt     lt form gt       lt h1 gt   title   lt  h1 gt         render  text-field  label  First name  id  author-first-name            render  text-field  label  Last name  id  author-last-name            render  text-field  label  Email  id  author-email            render  checkbox-field  label  Private   id  private-question        lt  form gt   lt  script gt    Hope this helps    someone

User · Answer

Sounds like you want to do something like this      gt  person  another   attribute        Yehuda already gave you a way of doing that      gt  person this     But to clarify   To give your partial its own data  just give it its own model inside the existing model  like so      gt  person this childContext     In other words  if this is the model you re giving to your template    var model         some    attribute      Then add a new object to be given to the partial   var model         some    attribute       childContext              another     attribute     this goes to the child partial           childContext becomes the context of the partial like Yehuda said -- in that  it only sees the field another  but it doesn t see  or care about the field some    If you had id in the top level model  and repeat id again in the childContext  that ll work just fine as the partial only sees what s inside childContext

User · Answer

Yes  I was late  but I can add for Assemble users  you can use buil-in  parseJSON  helper http   assemble io helpers helpers-data html   Discovered in https   github com assemble assemble issues 416

[javascript] Passing variables through handlebars partial

Examples related to javascript

Examples related to html

Examples related to handlebars.js

Examples related to templating