如何使用{{#each}}在Meteor中显示许多嵌套对象?

时间:2014-10-18 03:29:01

标签: mongodb meteor spacebars

使用下面的MongoDB子文档,如何使用{{#each}}块帮助器(或任何方法)迭代recurring内的对象?

"recurring": {
    "T12345" : {
        "amount" : 102,
        "created_at" : "2014-09-29T17:43:18.414627+00:00",
        "status": "pending",
        "guid" : "T12345"
    },
    "T12346" : {
        "amount" : 102,
        "created_at" : "2014-09-30T17:45:02.768939+00:00",
        "status": "succeeded",
        "guid" : "T12346",

    }
}

JS档案

Template.subscription.helpers({
subscription: function () {
    return this.recurring.transactions; //The subscription filters out the records marked viewable: false
},
    fname: function() {
        return this.customer.fname;
    },
    lname: function() {
        return this.customer.lname;
    },
    amount: function() {
        return this.debit.amount / 100;
    },
    trans_guid: function(key) {
        return this.recurring.transactions.key; //not sure how I can get the guid since the object that holds this property is named using the same guid
    }
});

HTML文件

<table class="table bootstrap-datatable datatable small-font">
<thead>
    <tr>
        <th>Status</th>
        <th>Date</th>
        <th>Fund</th>
        <th>Amount</th>
        <th>Number</th>
    </tr>
</thead>   
<tbody>
    {{#each subscription}}
        <tr>
            <td><span class="label label-success">{{status}}</span></td>
            <td>{{trans_date}}</td>
            <td>{{fund}}</td>
            <td>{{amount}}</td>
            <td><b>{{trans_guid}}</b></td>
        </tr>                       
    {{/each}}                                                                               
</tbody>
</table>

这是一个指向MongoDB文档大部分内容的链接 https://gist.github.com/c316/20d82003e61aefd3623e

我尝试做的是显示此订阅的所有交易。可能只有一个或几个有数百个。现在Meteor正在订阅整个文档,那么如何告诉meteor在哪里查看每个交易?

编辑答案

HTML文件

{{#each addKeys subscription}}
    {{#with values}}
        <tr id="{{trans_guid}}" class="trans-table-row">
            <td><span class="label label-success">{{status}}</span></td> <!-- label-warning label-info label-danger label-success  -->
            <td>{{trans_date}}</td>
            <td>{{fund ../..}}</td>
            <td>{{amount}}</td>
            <td><b>{{trans_guid}}</b></td>
        </tr>
    {{/with}}                       
{{/each}}   

JS档案

Template.subscription.helpers({
    values: function() {
        return this;
    },
    status: function() {
        return this.value.status;
    },
    fund: function(parentContext) {
        return parentContext.debit.donateTo;//getDonateTo();
    },
    trans_date: function() {
        return moment(this.value.updated_at).format("MM-DD-YYYY hh:mma");
    },
    amount: function() {
        return "$" + (Math.floor(this.value.amount) / 100).toFixed(2);
    },
    trans_guid: function() {
        return this.value.guid;
    }
});
Template.registerHelper('addKeys', function (all) {
    return _.map(all, function(i, k) {
        return {key: k, value: i};
    });
});

1 个答案:

答案 0 :(得分:1)

JS:

Template.registerHelper('addKeys', function (all) {
    return _.map(all, function(i, k) {
        return {key: k, value: i};
    });
});

HTML:

<tbody>
    {{#each addKeys subscription}}
      {{#with value}}
        <tr>
            <td><span class="label label-success">{{status}}</span></td>
            <td>{{trans_date}}</td>
            <td>{{fund}}</td>
            <td>{{amount}}</td>
            <td><b>{{trans_guid}}</b></td>
        </tr>
      {{/with}}                 
    {{/each}}                                                                               
</tbody>