CODEWITHSUNDEEP
backbone.jsmarionette
Brandon Durham
Brandon Durham

Reputation: 7707

How can I get data from the child of a CompositeView?

I have a CompositeView with a <header> and a <tbody>. I need specific data from the collection that's added to the <tbody> for use in the <header>. Specifically, I need to display the TOTAL NUMBER of records in the collection as well as the TOTAL COST of all models (each model has an amount attribute with a dollar value, like 54.35).

How might I do this?

Here is all relative code:

/*
 * Layout
 */
var AppLayout = Backbone.Marionette.Layout.extend({
    template: "#customer-view",
    regions: {
        card: "#customer-card",
        quotes: "#customer-quotes",
        orders: "#customer-order-history"
    }
});
Show.Layout = new AppLayout();
Show.Layout.render();


/*
 * ItemView
 */
Show.HistoryItemView = Backbone.Marionette.ItemView.extend({
    tagName: "tr",
    template: "#customer-history-item"
});
Show.HistoryItemsView = Backbone.Marionette.CompositeView.extend({
    template: "#customer-history-wrapper",
    itemView: Show.HistoryItemView,
    itemViewContainer: "tbody"
});


/*
 * Items
 */
var customer_orders = Customers.request("customer:orders", UserID);
var customer_orders_view = new Show.HistoryItemsView({
    collection: customer_orders
});
Show.Layout.orders.show(customer_orders_view);

… And the template:

<script type="text/template" id="customer-history-wrapper">
        <div class="module collapsible">
        <header>
            <hgroup>
                <h2>Order History</h2>
            </hgroup>
            <div class="results">
                <div class="left"><strong><%= NUMBER OF RECORDS %></strong> Orders</div>
                <div class="right">$ <%= TOTAL COST OF RECORDS %></div>
            </div>
        </header>
        <div class="module-content no-pad">
            <table class="simple-table six-up" cellpadding="0" cellspacing="0">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Licensee</th>
                        <th>Company</th>
                        <th>Order</th>
                        <th class="numeric">Total</th>
                        <th class="cta">&nbsp;</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</script>

<%= NUMBER OF RECORDS %> and <%= TOTAL COST OF RECORDS %> is where I'll need to insert this data.

Appreciate any help I can get!!

Upvotes: 0

Views: 160

Answers (1)

Rayweb_on
Rayweb_on

Reputation: 3727

CompositeViews can have a collection and a model, create a model with the properties that you need, on this case numberofRecors, totalCost, then on your onBeforeRender function calculate the totals of your model, something like this.

var customer_orders_view = new Show.HistoryItemsView({ 
    model: totals,
    collection: customer_orders
});
Show.Layout.orders.show(customer_orders_view);

Show.HistoryItemsView = Backbone.Marionette.CompositeView.extend({
template: "#customer-history-wrapper",
itemView: Show.HistoryItemView,
itemViewContainer: "tbody",
onBeforeRender : function () {
    this.model.set({numberOfRecors : this.collection.length});
    //here you can set the model values to be displayed.
}

});

you can also pass the model with the values precalculated that way you dont need the on beforeRender function, If you do that when you call show on the region this will call the render function of the compositeView and that will be it. you model will be also rendered alongisde your collection.

Upvotes: 1

Related Questions