带有 RESTful API 的 Backbone.js 和 Handlebars.js答案

【问题标题】：Backbone.js & Handlebars.js with RESTful API带有 RESTful API 的 Backbone.js 和 Handlebars.js
【发布时间】：2013-09-01 19:48:25
【问题描述】：

我正在尝试将 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] 的需求？

【问题讨论】：

您在将 JSON 传递到模板之前对其进行字符串化。需要直接传入对象。
或者，从模型或集合中传递对象；例如对于模型，传递模型的属性，对于集合，将集合的模型传递给模板函数 - 我通常更喜欢这个，以防我需要重写 toJSON 方法来重新排列我的对象/集合以更好地匹配服务器期待（如果服务器向我提供的对象不是我需要的形式并且我重新排列它，通常必须这样做）
@Nathan：我最初是直接传递对象，但这也不起作用。我也尝试了 JSON.parse() ，但出现了错误。还有其他建议吗？
@kinakuta：我该怎么做呢？另外，这是一种好的做法吗？如果可以的话，我真的很想正确地做到这一点……
我找到了解决方法，但想了解为什么需要这样做，以及是否可以调整 JSON 输出以减少对解决方法的需求？请查看我的编辑。

标签： rest backbone.js handlebars.js

【解决方案1】：

看起来您的 API 会返回一些“元”信息（status : true 部分）以及有关集合的数据，并且您的真实数据位于 result 数组中。我认为 Backbone 假设您的数据只是一个项目，并将其放入数组中，因为它被输入到集合对象中。这就是为什么您需要使用 data[0] 将第一项从该数组中拉出。

我想你要么想要修改你的 json，以便当前在 result 中返回的数组是顶级元素。你需要找到一种方法告诉 Backbone，你的数据位于 result 元素中，而不是顶层。

【讨论】：