Question

I want to create a complex form with Backbone.Marionette. I think the form should be like this:

Any change on products or payments should affect “sale” model. The model structure is:

sale   :   {
    date        :             '10/01/2010',
    customer    :             'Jaime Rivera'
    products    :             [{product_name:'ZZZZZZ', price: 100, quantity: 2},
                               {product_name:'yyyyyy', price: 33, quantity: 1}],
    payments    :             [{type:'check', other_data: '', amount: 160},
                               {type:'credit-card', other_data: '', amount: 73}] 
}

I would like to know the best way to structure the views to create the form. I’m not sure if i should use layout, compositeview or collectionview.

Answer 1

There are multiple ways to make this work with Marionette’s views, and none of them are right or wrong necessarily. Some will work better for your other constraints, like what data needs to be used to render this, what events need to be handled, etc.

Given the data that you’ve shown, though, this looks like a Layout with two CompositeViews.

The Layout would render the the date picker, input box and two empty divs for products and payments. Each of these empty divs would have a region definition associated in the Layout, so you can show the products and payments.

You could then have a CompositeView for products – a template that renders the list of products and the Add Product button. The CompositeView itself would handle the Add Product button click. An ItemView would be specified to render each Product in the list.

Payments would be done the same way as Products.

… again, this is only one option for making it work. You could do the entire thing with one Layout and 2 Collection views, or the entire thing as a single ItemView (which would be difficult to maintain, but still possible).

Hope that helps.