Login/Register
Context of {{title}} in master template when using multiple data/json files using assemble
Asked Answered
handlebars.jsassemble
R

1

9

I am using assemble.io for a simple static web site but am having issues with the {{title}} tag. Here is a rough overview of the issue.

Here is my layout.hbs:

<!DOCTYPE html>
<html>
  <head>
    <title>{{title}}</title>
  </head>
  <body>
    <!-- the body tag is used to "pull in" content from pages -->
    {{> body }}
  </body>
</html>

I have 2 json files for data:

foo1.json

{
  "title": "Hello world I am title 1"
}

foo2.json

{
  "title": "I am a different title"
}

And I have 2 pages:

foo1.hbs

{{#foo1 }} 
 {{> module1 }}
 {{> module2 }}
 {{> module3 }}
{{/foo1 }}

foo2.hbs

{{#foo2 }} 
 {{> module1 }}
 {{> module2 }}
 {{> module3 }}
{{/foo2 }}

My gruntfile.js snippet:

options: {
  layout: "src/responsive/layouts/layout.hbs",
  partials: 'src/responsive/modules/**/*.hbs',
  data: 'src/responsive/data/**/*.json',
  flatten: false
},
pages: {
  expand: true,
  cwd: 'src/responsive/pages',
  src: '**/*.hbs',
  dest: 'src/'
}

When I run 'grunt assemble' I get no page title. I think this has something to do with context as if I change {{title}} in layout.hbs to be {{foo1.title}} or {{foo2.title}} it works but then both pages get the same title as they share this template.

How can I make the context of {{title}} in layout.hbs work for all json files being passed in?

A.

Refinement answered 23/7, 2014 at 9:21 Comment(4)
I have tried {{page.title}} but then both return the title from foo1.json – Refinement
I have also tried {{this.page.title}} but again both results return the title from foo1.json. When assemble compiles pages, does it use all concat all the json files and use them for every page? I thought there was a 1-to-1 relationship between page and json if they had the same name? – Refinement
Are you sure about {{page.title}}? It works correctly for me with your example. – Lenticel
Apparently it doesn't work if i have another index.hbs in a different folder (see below) – Refinement
G
3

@Adi I setup a repo here containing the structure that you described.

I just changed this code in layout.hbs and it's working as expected.

<!DOCTYPE html>
<html>
  <head>
    <title>{{page.title}}</title>
  </head>
  <body>
    <!-- the body tag is used to "pull in" content from pages -->
    {{> body }}
  </body>
</html>

If you have a repo we can look at, it might help track down the issue.

Hope this helps.

Gesner answered 28/7, 2014 at 4:13 Comment(4)
You can find the repo here: github.com/adrianjacob/assemble-546 If you look at src/index.html and src/insurance/index.html you can see they share the same title after running 'grunt assemble'. However, they should have different titles if you look at the json files. Cheers, A. – Refinement
Right now, assemble only uses the basename of the files to do the matching. So the second index file overwrites the data in the first index file. Also, you have foo.json in the insurance folder instead of index.json. Try changing insurance/index.hbs to insurance/foo.hbs and you should see the title change. – Gesner
So what would you do if you wanted to render an index.html and an insurance/index.html? Is there a plan to do matching based on folders as well? – Refinement
I solved that with a Grunt option: buildPages: { files: [ { expand: true, cwd: '<%= site.templates %>/', src: ['pages/**/*.hbs'], dest: '<%= site.dest %>/' } ] } – Glick

© 2022 - 2024 — McMap. All rights reserved.