How to create BIll or invoice view in backbone marionette?

Question

I'm beginner in Marionette and trying to create view that renders invoice/ billing template with this data:

    data={
        name: "jems"
        date: "may 15 2014"
        dataList:[
            {
                date: "may 15 2014",
                product: "xyz",
                qty: "3",
                rate: "5",
                totalAmount: "5"
            },
            {
                date: "may 15 2014",
                product: "xyz",
                qty: "3",
                rate: "5",
                totalAmount: "5"
            },
            {
                date: "may 15 2014",
                product: "xyz",
                qty: "3",
                rate: "5",
                totalAmount: "5"
            },
            {
                date: "may 15 2014",
                product: "xyz",
                qty: "3",
                rate: "5",
                totalAmount: "5"
            }
        ]
    }

i tried to use composite view from http://jsfiddle.net/derickbailey/xX9X3/ example. but no luck.

bit confused to use collectionView,compositeView,itemView to create nested invoice type view. in some nested view examples i also found layout used that make me totally confused.

Please help!.

Thanks in Advance!

Answer 1

Your data is less complicated than the one in the fiddle example. You have 1 model that contains a collection. From my experience this calls for a combination of CompositeView + ItemView for each collection member.

<script id="invoice-template" type="text/template">
<%= name %> on <%= date %>:

<ul></ul>
</script>

<script id="billing-template" type="text/template">
    <%= date %>, <%= totalAmount %>$ for product: <%= product %>
</script>    

var BillingView = Backbone.Marionette.ItemView.extend({
    template: "#billing-template",
    tagName: "li"
});

var InvoiceView = Backbone.Marionette.CompositeView.extend({
    template: "#invoice-template",

    tagName: "ul",
    itemView: BillingView    
});

See here it in action: http://jsfiddle.net/xX9X3/116/