Use template elements


#1

Hello everybody.
I have a small problem. I try to do something like “invoices”. Firstly I want to complete the “schema” - number of invoice, dates and customer. Than i have a subpage that has a collection of items. Than I have a form “dataview” that shows those items.
And there’s a problem. I want to make “save/cancel” options from the “schema” under the dataview. I don’t want to do “position:absolute”, just only try to put button after those another templates (subpages).

<template name="InvoicesNew">
    <div class="page-container container">
        <div class="row">
            <div class="col-md-12" id="content">
                <div class="row" id="title_row">
                    <div class="col-md-12">
                        <div id="page_menu" class="pull-right">
                        </div>
                    </div>
                </div>
                {{> InvoicesNewNowaFaktura}}
            </div>
        </div>
        <div class="row">
            <div class="col-md-12" id="menu">
            </div>
        </div>
        <div class="row">
            <div class="col-md-12" id="subcontent">
                {{> yield region='InvoicesNewSubcontent'}}
            </div>
        </div>
    </div>
</template>

<template name="InvoicesNewNowaFaktura">
    <div class="">
        <h2 id="component-title">
        </h2>
        <form id="form" role="form">
            <div id="inputforma">
            {{#if errorMessage}}
            <div class="alert alert-warning">
                {{errorMessage}}
            </div>
            {{/if}}

            {{#if infoMessage}}
            <div class="alert alert-success">
                {{infoMessage}}
            </div>
            {{/if}}
            <div class="form-group" id="inputinvoicefrom">
                <p class="boldy">FROM</p>
                <p>{{currentUser.profile.name}}</p>
                <p>{{currentUser.profile.address}}</p>
                <p>{{currentUser.profile.email}}</p>
                <p><a href="/user_settings/profile">Enter your details</a></p>
            </div>
            <div class="form-group  field-invoice-number" id="inputinvoicenumber">
                <label for="invoiceNumber" class="boldy">
                    INVOICE NO.
                </label>
                <div class="input-div">
                    <input type="text" name="invoiceNumber" value="{{nextinvoiceNumber}}" class="form-control" autofocus="autofocus" required="required">
                    <span id="help-text" class="help-block">
                    </span>
                    <span id="error-text" class="help-block">
                    </span>
                </div>
            </div>
            <div class="form-group  field-customer-id" id="inputcustomer">
                <label for="customerId" class="boldy">
                    TO
                </label>
                <div class="input-div">
                    <select class="form-control" name="customerId" required="required">
                        {{#each customers}}
                        <option value="{{_id}}">
                            {{name}}
                        </option>
                        {{/each}}
                    </select>
                    <span id="help-text" class="help-block">
                    </span>
                    <span id="error-text" class="help-block">
                    </span>
                </div>
            </div>
        </div>
        <div id="inputformadays">
            <div class="form-group  field-date_issued" id="inputdateissued">
                <label for="date_issued" class="boldy">
                    ISSUED
                </label>
                <div class="input-div">
                    <div class="input-group date">
                        <input type="text" name="date_issued" value="{{formatDate 'today' 'DD-MM-YYYY'}}" class="form-control" required="required" data-type="date" data-format="DD-MM-YYYY">
                        <span class="input-group-addon">
                            <i class="fa fa-calendar">
                            </i>
                        </span>
                    </div>
                    <span id="help-text" class="help-block">
                    </span>
                    <span id="error-text" class="help-block">
                    </span>
                </div>
            </div>
        </div>
        <div id="inputformadays">
            <div class="form-group  field-date_due" id="inputdatedue">
                <label for="date_due" class="boldy">
                    DUE
                </label>
                <div class="input-div">
                    <div class="input-group date">
                        <input type="text" name="date_due" value="" class="form-control" required="required" data-type="date" data-format="DD-MM-YYYY">
                        <span class="input-group-addon">
                            <i class="fa fa-calendar">
                            </i>
                        </span>
                    </div>
                    <span id="help-text" class="help-block">
                    </span>
                    <span id="error-text" class="help-block">
                    </span>
                </div>
            </div>
            </div>

            <div id="inputformadays">
                <div class="form-group  field-date_due" id="inputdatedue">
                    <label for="total_amount">
                        Total Amount:     {{fakturka.totalAmount}}
                    </label>
                </div>
                </div>

            <div class="form-group saveblock">
                <div class="submit-div">
                    <button id="form-submit-button" class="btn btn-success" type="submit">
                        <span class="fa fa-check">
                        </span>
                        Save
                    </button>
                    <!--
                    <a href="#" id="form-back-button" class="btn btn-default">
                        Cancel
                    </a>
                -->
                    <span id="delete-button" class="btn btn-default {{deleteButtonClass}}" title="Cancel">
                        Cancel
                    </span>
                </div>
            </div>
        </form>
    </div>
</template>

I want to put that div from

                <div class="form-group saveblock">
                <div class="submit-div">
                    <button id="form-submit-button" class="btn btn-success" type="submit">
                        <span class="fa fa-check">
                        </span>
                        Save
                    </button>
                    <!--
                    <a href="#" id="form-back-button" class="btn btn-default">
                        Cancel
                    </a>
                -->
                    <span id="delete-button" class="btn btn-default {{deleteButtonClass}}" title="Cancel">
                        Cancel
                    </span>
                </div>
            </div>

After everything else on my page.
As you can see I have the first template like this:

<template name="InvoicesNew">
    <div class="page-container container">
        <div class="row">
            <div class="col-md-12" id="content">
                <div class="row" id="title_row">
                    <div class="col-md-12">
                        <div id="page_menu" class="pull-right">
                        </div>
                    </div>
                </div>
                {{> InvoicesNewNowaFaktura}}
            </div>
        </div>
        <div class="row">
            <div class="col-md-12" id="menu">
            </div>
        </div>
        <div class="row">
            <div class="col-md-12" id="subcontent">
                {{> yield region='InvoicesNewSubcontent'}}
            </div>
        </div>
    </div>
</template>

So I want to put those buttons after yielded region and I don’t know how to do that. I would be grateful if you could help me :smile:


#2

Refresh :))
I just really need it :slight_smile:


#3

Would be easier to help if there wasn’t a tonne of irrelevant code to sift through.


#4

I hope it’s not so hard to understand what I want to do with that.
Of course, it’s a lot, but… it’s one site and I wanted you all to understand.


#5

Man it is awful - make a gist with a comment in the place where you wanna show your button


#6

OK. I will cut that, so

<template name="InvoicesNew">
    <div class="page-container container">
        <div class="row">
            <div>
                {{> InvoicesNewNowaFaktura}}
            </div>
        </div>
        <div class="row">
            <div class="col-md-12" id="subcontent">
                {{> yield region='InvoicesNewSubcontent'}}
            </div>
        </div>
    </div>
</template>

I want to take buttons from “{{> InvoicesNewNowaFaktura}}” template after “{{> yield region=‘InvoicesNewSubcontent’}}”

Buttons are another div class in that template, but I don’t know how to put it out from the template to another template (I think it’s the way how it would work), which I could put after the yielded region.


#7

As I understand buttons events are handled by InvoicesNewNowaFaktura template? Cant you just wrap {{> yield region='InvoicesNewSubcontent'}} into InvoicesNewNowaFaktura layout before those buttons? If your InvoicesNewNowaFaktura layout is solid and you dont override it you could use {{> UI.contentBlock}} inside InvoicesNewNowaFaktura markup


#8

Yes, I could!
Big, big thanks!
I’m ultra-new in Meteor and I didn’t know that I could do those things. Thanks a lot! :slight_smile: