Position of subcontent

[julienrott]

Hi,

Thank you for your work, it's really great. I didn't find an email to contact you, so sorry for creating an issue for my question.

I'm building an app based on your invoices model. As I understand, the subcontent pages for creating/editing invoice_items are displayed at the bottom of the page, after it's components. I would like to display it in the middle of the page's components. Would this be possible ?

I tried to insert a div component and design it as dest_selector, but unsucessfully.

[perak]

Hi, No problem for opening issue. Here is my e-mail so you can contact me directly if you have more questions in the future: petar.korponaic@gmail.com

Answer to your question:

There is multiple built-in HTML templates for pages:

• page_empty
• page_subcontent_sidenav
• page_subcontent_tabnav

(and more, such as "login", "register", "forgot_password" etc.)

in particular example, template "page_subcontent_tabnav" is used. You can see it in input file, in invoice details page:

{
    "name": "details",
    "template": "page_subcontent_tabnav",
    ...
}

You can create you own page template by specifying "custom_template". That functionality is not documented (will be documented in next update).

So, in your input file, instead "template", you can set "custom"_template".

Example:

{
    "name": "details",
    "custom_template": "xxx",
    ...
}

In this example, custom template is named "xxx" and you need to provide two files: xxx.html and xxx.js and put them into same directory where is your input file. Actually, "custom_template" is path to template files relative to input file (without extension). So you can also specify "custom_template": "my_files/xxx" in that case, you need to provide "my_files/xxx.html" and "my_files/xxx.js".

Your .html and .js files can contain anything, but best practice is to follow meteor-kitchen's logic. This is how your files should look like:

HTML

<template name="TEMPLATE_NAME">
    <h1 id="page_title">PAGE_TITLE</h1>

    <div id="menu">
    </div>

    <div id="content">
        <p id="page_text">PAGE_TEXT</p>
    </div>

    <div id="subcontent">
    </div>
</template>

JS

Template.TEMPLATE_NAME.rendered = function() {
    /*TEMPLATE_RENDERED_CODE*/
};

Template.TEMPLATE_NAME.events({
    /*EVENTS_CODE*/
});

Template.TEMPLATE_NAME.helpers({
    /*HELPERS_CODE*/
});

In HTML file you need elements with ID menu, content and subcontent. That elements can be positioned as you wish (and don't need to be div).

That's it. Please let me know does it help.

[perak]

Ooops, sorry: everything I wrote here doesn't work in version 0.9.29. It will work in next version 0.9.30. I'l upload it this weekend, so expect it in monday.

[julienrott]

Thank you very much for your answer, and for the new version ! I'll test it.

[perak]

@julienrott Version 0.9.30 is now online.

Enjoy! :)

[julienrott]

Great ! As I already prepared the files, I just had to update kitchen and regenerate the app ;-) Working perfect ! Thank you very much !

[vnevoa]

Hi @perak ! Nice job with the Kitchen! :-)

I've been using it successfully to build up a complex App by developing my own "custom_component"s inside the "pages". But this implies that the custom component is automatically added by meteor-kitchen into the generated page.

Question: How should I create a reusable meteor template to be called inside other custom templates (instead of pages) anywhere I want? Is the "custom_component" limited to being inside a specific page, or can I somehow declare it as a general reusable component?...

I tried defining the reusable template piggybacking the custom_component files like so:

<template name="TEMPLATE_NAME">
...
<div >{{> reusablecomp param="bla" }}</div>
...
</template>

<template name="reusablecomp">
...
</template>

And this does work, I can call it with {{> reusablecomp param="bla" }} anywhere else in the App, but it is a hack. Problems arise as soon as I try to reuse the top level custom_component files to generate a second page/route, then iron-router breaks down (because of duplicate "reusable" template?).

So the the question is: what is the proper way of declaring the reusable component?

I'm posting the question here instead of emailing because I feel it would be helpful to others as well.

[perak]

Hi @vnevoa

Nice to hear you are using kitchen for large project :)

“Reusable custom components” is must have feature and we got it in our roadmap. Until it is “officially” supported, maybe you can define your custom component in “files” section (destination: CLIENT_COMPONENTS_DIR) ?

[vnevoa]

Wonderful, that's exactly what I was looking for! Thanks. :-) I wish the documentation was a little bit clearer/verbose on the "file_pair" section, like having a little table with a path & explanation for each of the *_DIR destinations?...

[perak]

I agree about docs. (not only this - docs is generally pure)