0

我正在尝试将 Backbone.js 与 Handlebars.js 一起使用来使用和显示自定义 JSON API。

数据肯定会被消耗并添加到集合中。

模板呈现，但表中没有数据（一个完全空的行）。

我将如何调试这个？

路由器

'showStatement': function() {
    new app.StatementView({collection: new app.StatementCollection()});
}

收藏

app.StatementCollection = Backbone.Collection.extend({
    model: app.Transaction,
    url: 'http://localhost/api/public/out/123456/statement',

    initialize: function() {
        console.log('Init app.StatementCollection');
    }
});

模型

app.Transaction = Backbone.Model.extend({
    /*
    defaults: {
        vendor:   'Unknown',
        amount:   'Unknown',
        currency: 'Unknown',
        date:     'Unknown'
    }
    */
});

看法

app.StatementView = Backbone.View.extend({

    el: '#page',

    template: Handlebars.getTemplate( 'account_statement' ),

    initialize: function() {
        console.info(this.collection);
        this.render();
        this.listenTo(this.collection, 'add', this.render);
        this.listenTo(this.collection, 'reset', this.render);
        this.collection.fetch();
    },

    // render library by rendering each book in its collection
    render: function() {
        this.$el.html( this.template( JSON.stringify(this.collection.toJSON())) );  // <------ pretty sure the problem lies here?!?
        console.log('col', JSON.stringify(this.collection.toJSON()) );  // <------ the output from this is shown at the bottom
        return this;
    }
});

车把模板

{{#if statement}}
    <h1>Your Statement</h1>
    <table border="1">
        <thead>
            <th>Date</th>
            <th>Name</th>
            <th>Amount</th>
        </thead>
        <tbody>
        {{#each statement}}
            {{debug}}
            <tr>
                <td>{{this.vendor}}</td>
                <td>{{currency this.currency}}{{this.amount}}</td>
                <td><time class="format-date" datetime="{{this.date}}">{{this.date}}<time></td>
            </tr>
        {{/each}}
        </tbody>
    </table>
{{else}}
    <p class="warning">Sorry, nothing to show.</p>
{{/if}}

这是我的 API 的 JSON 的样子：

{"status":true,"result":[{"id":1,"vendor":"Jessops","amount":595.99,"currency":"GBP","date":"2012-11-01 04:57:04"},{"id":2,"vendor":"Starbucks","amount":6.99,"currency":"GBP","date":"2012-11-02 04:57:04"},{"id":3,"vendor":"Superdry","amount":155.99,"currency":"GBP","date":"2012-11-03 04:57:04"},{"id":6,"vendor":"Reebok Outlet","amount":205.99,"currency":"USD","date":"2012-11-05 04:57:04"}]}

来自 console.log('col', JSON.stringify(this.collection.toJSON()) ) 的输出；

col [{"status":true,"result":[{"id":1,"vendor":"Jessops","amount":595.99,"currency":"GBP","date":"2012-11-01 04:57:04"},{"id":2,"vendor":"Starbucks","amount":6.99,"currency":"GBP","date":"2012-11-02 04:57:04"},{"id":3,"vendor":"Superdry","amount":155.99,"currency":"GBP","date":"2012-11-03 04:57:04"},{"id":6,"vendor":"Reebok Outlet","amount":205.99,"currency":"USD","date":"2012-11-05 04:57:04"}]}]

编辑： 我现在发现将我的渲染功能更改为以下工作：

render: function() {
    data = this.collection.toJSON();
    this.$el.html(this.template( {statement: data[0]} ));
    return this;
}

这表明我的 JSON 输出是错误的。如何改进我的 JSON 以减少对[0]?

4

1 回答 1

0

It looks like your API returns some 'meta' information (the status : true part) along with the data about the collection, and that your real data lives in the result array. I think Backbone is assuming that your data is just a single item, and it putting it into an array since it is being fed into a collection object. That's why you're needing to use data[0] to pull the first item out of that array.

I think you'd either want o modify your json so that the array currently returned in result is the top level element. Of you'd need to find a way to tell Backbone that your data lives in the result element, not at the top level.

于 2013-09-10T16:07:46.567 回答