template inheritance #38

Closed
jonschlinkert opened this Issue Feb 7, 2013 · 3 comments

Comments

Projects
None yet
2 participants
Owner

jonschlinkert commented Feb 7, 2013

I think template inheritance should work like this:

  • "section" blocks are used to create the default content
  • "extend" blocks inherit "section" blocks

Layout: default.hbs

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>{{ title }}</title>
    </head>
    <body>

        {{#section "header"}}
          <div class="page-header">
            <h1>Welcome to our site!</h1>
          </div>
        {{/section}}

        {{> body }}

        {{#section "footer"}}
          <script src="assets/jquery.js"></script>
          <script src="assets/bootstrap.js"></script>
        {{/section}}

    </body>
</html>

Page: some-page.hbs

---
title: About Us
layout: default.hbs

---
{{#extend "header"}}
  <div class="page-header">
    <h1>{{ title }}</h1>
  </div>
{{/extend}}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

{{#extend "footer"}}
  <script src="assets/jquery.js"></script>
  <script src="assets/bootstrap.js"></script>
  <script src="assets/other-script.js"></script>
{{/extend}}

Note also that the extend blocks don't have to be in any particular order. They could be like this:

---
title: About Us
layout: default.hbs

---

<!-- this content would go in the {{> body }} -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<!-- this content would replace the head section -->
{{#extend "header"}}
  <div class="page-header">
    <h1>{{ title }}</h1>
  </div>
{{/extend}}

<!-- this content would replace the footer section -->
{{#extend "footer"}}
  <script src="assets/jquery.js"></script>
  <script src="assets/bootstrap.js"></script>
  <script src="assets/other-script.js"></script>
{{/extend}}
Owner

doowb commented Mar 29, 2013

@jonschlinkert What's the desired outcome for each of those examples? I'm used to how sections work in the asp.net razor engine, so I'm assuming that the sections will be rendered in the place where they're declared in the layout (default.hbs). Also, I'm assuming that the markup in the extend blocks from some-page.hbs will overwrite the markup in the section blocks in default.hbs. If an extend block is not declared in some-page.hbs, I'm assuming that the markup in the section block in default.hbs will be used.

I think the output would look the same in both cases:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>About Us</title>
    </head>
    <body>

      <div class="page-header">
        <h1>About Us</h1>
      </div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

      <script src="assets/jquery.js"></script>
      <script src="assets/bootstrap.js"></script>
      <script src="assets/other-script.js"></script>

  </body>
</html>

The word extend makes me think that you'd rather add the markup to the original markup. Maybe we can use the wording from razor and do renderSection in the layout and section in the page. They also have a few other parameters that indicate if the section is required or not, so an error can be thrown when one isn't provided in the page. The me know what you think.

Owner

jonschlinkert commented Mar 29, 2013

Correct on all accounts. And I agree with your point on "extend", but that's what every example I've seen has called it. If we called it something else, I'd probably rather name it "replace" than "renderSection". However, if we were to add a third optional parameter it could behave like an actual extend.

{{#extend "footer"}}... {{/extend}}
{{#extend "footer" prepend}}... {{/extend}}
{{#extend "footer" append}}... {{/extend}}

So the default behavior would be "replace". I like your thoughts on having the ability to "require" a section, but that's nice-to-have I think. Once we get this and the {{ include [name] }} helper working, the two features working together will will be pretty powerful

@jonschlinkert jonschlinkert referenced this issue in helpers/handlebars-helpers Mar 29, 2013

Closed

template inheritance #16

Owner

jonschlinkert commented May 17, 2013

Closing since this is more of a helper issue

This was referenced Oct 13, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment