New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dynamic partials #81

Open
martijnvermaat opened this Issue Jan 27, 2016 · 12 comments

Comments

Projects
None yet
8 participants
@martijnvermaat
Copy link

martijnvermaat commented Jan 27, 2016

Handlebars has support for dynamic partials, but I did not get them to work with handlebars-loader.

Pseudo-example:

main.handlebars

---
<p>The statement below should resolve the 'world' partial and show 'Hello, world!'.</p>
{{> (lookup . 'hello') }}

world.handlebars

---
<p>Hello, world!</p>

main.js

---
require('main.handlebars')({hello: 'world'});

In the Handlebars Compiler APIs it is hinted that implementing nameLookup (as is done by handlebars-loader) will not be enough for dynamic partials; overriding VM.resolvePartial may be required. That method can be found here, but I honestly have no idea how to go about this.

Handlebars using current handlebars-loader fails with The partial world could not be found.

martijnvermaat added a commit to varda/aule that referenced this issue Feb 8, 2016

Use webpack instead of RequireJS
This is a major refactoring driven primarily by moving from RequireJS to
webpack. Advantages include:

- Pre-bundled scripts, templates, and stylesheets drastically improve
  performance for the user.
- Easier use of NPM packages.
- No more Git submodules and vendor copies.
- Awesome webpack dev server for development.
- Ability to run coffeelint automatically during development.

This refactoring touches almost all of the project and includes the
following changes:

- Rewrite AMD to CommonJS.
- Config is now found in the `AULE_CONFIG` global.
- Update all dependencies to their latest version (except Bootstrap).
- Use local copy of Open Sans instead of Google Fonts API.
- Use URI.js for URI manipulation.
- No more hardcoded assumptions on the base URI of Aulë.
- Reindented all CoffeeScript to 2 spaces.
- Subpage templates are no longer in separate files, but defined as
  inline partials in their parent files. This is a workaround for this
  bug: pcardune/handlebars-loader#81

And probably some smaller changes which I'm forgetting now.
@eddiemoore

This comment has been minimized.

Copy link

eddiemoore commented Feb 16, 2016

I'm facing the same issue here. Been converting our Backbone require.js app over to webpack and this seems to be the only part that is holding me back now.

@martijnvermaat

This comment has been minimized.

Copy link
Author

martijnvermaat commented Feb 16, 2016

I used inline partials as a workaround for now.

@frxnz

This comment has been minimized.

Copy link

frxnz commented Oct 20, 2016

Are there any plans to support dynamic partials? Either with

{{> (whichPartial) }}
or
{{> (lookup . 'myVariable') }}

@pcardune

This comment has been minimized.

Copy link
Owner

pcardune commented Oct 25, 2016

Only if someone submits a pull request with unit tests! At the moment I
only have time for doing code reviews and cutting new releases, so it's up
to others if people want new features.
On Thu, Oct 20, 2016 at 12:19 PM Derek Wheelden notifications@github.com
wrote:

Are there any plans to support dynamic partials? Either with

{{> (whichPartial) }}
or
{{> (lookup . 'myVariable') }}


You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#81 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAHnm5MF64bbl6o7d1kmHgPhq3KuBt0lks5q176sgaJpZM4HN5mH
.

@Tsouef

This comment has been minimized.

Copy link

Tsouef commented Jan 12, 2017

Someone found a solution for that ?

@gko

This comment has been minimized.

Copy link

gko commented Jan 19, 2017

@Tsouef handlebars-template-loader seems to support them but there are also troubles with other stuff

@spike008t

This comment has been minimized.

Copy link

spike008t commented Feb 15, 2018

I've found a workaround, the main problem is dynamic partial is not registered on Handlebars.partials context.

So to support dynamic partial, you need to register the precompiled template as partial on the handlebars global scope on your app first before doing your stuff.

import Handlebars from 'handlebars';

import MyPartial from './_myPartial.handlebars'; // precompile partial
Handlebars.partials['myPartial'] = MyPartial;  // register it as partial

 // here template.handlebars can use dynamic partial with myPartial
import template from './template.handlebars';
@MelanieMenard

This comment has been minimized.

Copy link

MelanieMenard commented Feb 19, 2018

@spike008t

Hello, I'm porting a backbone app from grunt to webpack and tried your solution but Iget the following error:

./node_modules/handlebars/lib/index.js
Module not found: Error: Can't resolve 'fs' in '/PATH_TO_MY_APP/node_modules/handlebars/lib'
 @ ./node_modules/handlebars/lib/index.js 17:11-24
 @ ./app/js/views/header-view.js
 @ ./app/js/views/app-layout.js
 @ ./app/js/controllers/router-controller.js
 @ ./app/js/application.js
 @ ./app/js/init.js
 @ multi (webpack)-dev-server/client?http://localhost:8000 webpack/hot/dev-server ./app/js/init.js

Does anyone have a clue what the problem is?

Many thanks in advance!

@spike008t

This comment has been minimized.

Copy link

spike008t commented Feb 19, 2018

@MelanieMenard I forget to mention my webpack.config....

I do have that:

{
  resolve: {
    alias: : {
      'handlebars': 'handlebars/runtime.js'
    }
  }
}

Could you try to call at the top of your js file if you haven't the alias.

import Handlebars from 'handlebars/runtime.js';
@MelanieMenard

This comment has been minimized.

Copy link

MelanieMenard commented Feb 19, 2018

@spike008t

Ah thank you! I came to similar solution from looking at how they register partials in other handlebars loader (https://github.com/emaphp/handlebars-template-loader) and got it to work:

import Handlebars from 'handlebars/runtime.js';
// precompile partial
import MyPartial from 'HandlebarsTemplates/my-partial.hbs';
// Register partial
Handlebars.registerPartial('my-partial', MyPartial);
@spike008t

This comment has been minimized.

Copy link

spike008t commented Feb 19, 2018

@MelanieMenard

At the end of the documentation about precompilation: https://handlebarsjs.com/precompilation.html

We can see:

Handlebars.partials["test1"] = template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
  var helper;

  return "<div>whatever "
  + container.escapeExpression(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"name","hash":{},"data":data}) : helper)))
  + "</div>";
},"useData":true});

I think both works, but normally, registerPartial takes as 2nd argument a template as "string" instead of a function...

@spike008t

This comment has been minimized.

Copy link

spike008t commented Feb 20, 2018

@pcardune I think handlebars-loader could not really handle correctly dynamic partials, because webpack guide line explain clearly loader should be simple and determinist. So we could not really update handlebars environment inside the loader..
I suggest to update the doc & example to explain how to use dynamic partials by register the partials in handlebars object. I can send a PR with an example of how to manage it.

gbirke added a commit to wmde/fundraising-banners that referenced this issue Aug 16, 2018

Render text template into variable
Improve reusability of banner markup template by rendering the text into
a variable.

A more semantic solution would have been dynamic partials, but I could
not get them to work with the webpack handlebars-loader.
Solutions and workarounds from
pcardune/handlebars-loader#81
did not work.

Using more ES6 features: Spread operator (with babel plugin) and
property value shorthand syntax.

gbirke added a commit to wmde/fundraising-banners that referenced this issue Aug 16, 2018

Render text template into variable
Improve reusability of banner markup template by rendering the text into
a variable.

A more semantic solution would have been dynamic partials, but I could
not get them to work with the webpack handlebars-loader.
Solutions and workarounds from
pcardune/handlebars-loader#81
did not work.

Using more ES6 features: Spread operator (with babel plugin) and
property value shorthand syntax.

gbirke added a commit to wmde/fundraising-banners that referenced this issue Aug 16, 2018

Render text template into variable
Improve reusability of banner markup template by rendering the text into
a variable.

A more semantic solution would have been dynamic partials, but I could
not get them to work with the webpack handlebars-loader.
Solutions and workarounds from
pcardune/handlebars-loader#81
did not work.

Using more ES6 features: Spread operator (with babel plugin) and
property value shorthand syntax.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment