【问题标题】:How can I use {{#each}} to show many nested objects in Meteor?如何使用 {{#each}} 在 Meteor 中显示许多嵌套对象?
【发布时间】:2014-10-21 13:02:49
【问题描述】:

使用下面的 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};
    });
});

【问题讨论】:

    标签: mongodb meteor spacebars


    【解决方案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>
    

    【讨论】:

    • 我更新了我的问题以显示更多我的代码。你能帮助我了解如何在我的问题更新中使用你的答案吗?
    • 你的 html 和数据库记录不匹配,所以我不确定你想从哪里获取数据,例如 fund,但我认为我刚刚进行的更新我的答案就是你要找的。​​span>
    • 我添加了 Mongodb 文档的要点。我知道我不完全了解这里发生了什么,或者我认为我能够弄清楚如何在我的特定情况下使用您的答案。我只是没有在网上找到任何澄清的东西。我在我的代码中使用了你的更改,但我仍然没有工作。感谢您更新您的答案。鉴于文档,您知道我需要在我的 JS 文件中做什么才能获得正确的数据吗?
    • 我还是不明白你的问题。如果你能说出你想使用 mongodb 文档的哪些字段,以及你想看到这个文档的什么输出,也许会有所帮助。
    • 我想查看交易列表(实际上是一张表)。这就是事务中的所有内容:{} 我正在描绘一个表,其中每个事务都有一行。行内的数据将是数量、created_at 和其他一些数据。
    猜你喜欢
    • 2014-01-27
    • 2016-05-04
    • 2017-06-29
    • 1970-01-01
    • 2016-05-09
    • 2017-01-06
    • 2021-03-12
    • 1970-01-01
    • 2019-07-12
    相关资源
    最近更新 更多