如何在骨干木偶中创建账单或发票视图？

Question

我是 Marionette 的初学者，正在尝试使用这些数据创建呈现发票/计费模板的视图：

    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"
            }
        ]
    }

我尝试使用来自http://jsfiddle.net/derickbailey/xX9X3/ 示例的复合视图。但没有运气。

使用collectionView、compositeView、itemView 来创建嵌套发票类型视图有点困惑。在一些嵌套视图示例中，我还发现使用的布局让我完全困惑。

请帮忙！

提前致谢！

Answer 1

您的数据没有小提琴示例中的数据复杂。您有 1 个模型包含一个集合。根据我的经验，这需要为每个集合成员组合 CompositeView + ItemView。

<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    
});

在这里查看实际操作：http://jsfiddle.net/xX9X3/116/