Fatal编程技术网
  • json/
  • 主干RESTful JSON模式

主干RESTful JSON模式

json rest backbone.js

主干RESTful JSON模式,json,rest,backbone.js,Json,Rest,Backbone.js,如果我想将以下数据呈现给backbone.js集合，我创建的JSON应该是什么样子 id: 1 fname: "John" surname: "Lennon" email: "john@beatles.com" age: 22 id: 2 fname: "Paul" surname: "McCartney" email: "paul@beatles.com" age: 22 id: 3 fname: "George" surname: "Harrison" email: "george@be

如果我想将以下数据呈现给backbone.js集合，我创建的JSON应该是什么样子

id: 1
fname: "John"
surname: "Lennon"
email: "john@beatles.com"
age: 22

id: 2
fname: "Paul"
surname: "McCartney"
email: "paul@beatles.com"
age: 22

id: 3
fname: "George"
surname: "Harrison"
email: "george@beatles.com"
age: 20

id: 4
fname: "Ringo"
surname: "Starr"
email: "ringo@beatles.com"
age: 24
我将其导出如下：

[{
    "id":1,
    "fname":"John",
    "surname":"Lennon",
    "email":"john@beatles.com",
    "age":22
},{
    "id":2,
    "fname":"Paul",
    "surname":"McCartney",
    "email":"paul@beatles.com",
    "age":22
},{
    "id":3,
    "fname":"George",
    "surname":"Harrison",
    "email":"george@beatles.com",
    "age":20
},{
    "id":4,
    "fname":"Ringo",
    "surname":"Starr",
    "email":"ringo@beatles.com",
    "age":24
}]
当使用上面的JSON时，我的收藏似乎只包含最终的披头士（Ringo）

这是我的观点：

var app = app || {};

app.BeatleView = Backbone.View.extend({

        el: '#page',

        template: Handlebars.getTemplate( 'account_statement' ),

        initialize: function() {
                console.info('init:',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() {
                var data = this.collection.toJSON();
        console.log('col', this.collection );  // added
                this.$el.html( this.template( {beatles: data} ));
                return this;
        }
});

col child {length: 1, models: Array[1], _byId: Object, _listenerId: "l2", _events: Object…}
_byId: Object
_events: Object
_listenerId: "l2"
length: 1
models: Array[1]
0: child
_changing: false
_events: Object
_pending: false
_previousAttributes: Object
attributes: Object
amount: 205.99
currency: "USD"
date: "2013-05-13"
id: 13
vendor: "Reebok Outlet"
__proto__: Object
changed: Object
cid: "c3"
collection: child
id: 13
__proto__: Surrogate
length: 1
__proto__: Array[0]
__proto__: Surrogate

<h1>Your Statement</h1>
<table border="1">
    <thead>
        <th>Name</th>
        <th>Email</th>
        <th>Age</th>
    </thead>
    <tbody>
    {{#each beatle}}
        <tr>
            <td>{{this.fname}} {{this.surname}}</td>
            <td>{{this.email}}</td>
            <td>{{this.age}}</td>
        </tr>
    {{/each}}
    </tbody>
</table>
这是我的收藏

var app = app || {};

app.BeatlesCollection = Backbone.Collection.extend({
        model: app.Beatle,
        url: 'http://localhost/path/to/beatles',

        initialize: function() {
                console.log('Init Collection');
        }
});
这是我的型号

var app = app || {};

// create a model to represent a single transaction on a statement
app.Transaction = Backbone.Model.extend({});
这是一个
console.log（'col'，This.collection'）在我的视图的渲染方法中显示：


var app = app || {};

app.BeatleView = Backbone.View.extend({

        el: '#page',

        template: Handlebars.getTemplate( 'account_statement' ),

        initialize: function() {
                console.info('init:',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() {
                var data = this.collection.toJSON();
        console.log('col', this.collection );  // added
                this.$el.html( this.template( {beatles: data} ));
                return this;
        }
});



col child {length: 1, models: Array[1], _byId: Object, _listenerId: "l2", _events: Object…}
_byId: Object
_events: Object
_listenerId: "l2"
length: 1
models: Array[1]
0: child
_changing: false
_events: Object
_pending: false
_previousAttributes: Object
attributes: Object
amount: 205.99
currency: "USD"
date: "2013-05-13"
id: 13
vendor: "Reebok Outlet"
__proto__: Object
changed: Object
cid: "c3"
collection: child
id: 13
__proto__: Surrogate
length: 1
__proto__: Array[0]
__proto__: Surrogate



<h1>Your Statement</h1>
<table border="1">
    <thead>
        <th>Name</th>
        <th>Email</th>
        <th>Age</th>
    </thead>
    <tbody>
    {{#each beatle}}
        <tr>
            <td>{{this.fname}} {{this.surname}}</td>
            <td>{{this.email}}</td>
            <td>{{this.age}}</td>
        </tr>
    {{/each}}
    </tbody>
</table>


我的把手模板如下所示：


var app = app || {};

app.BeatleView = Backbone.View.extend({

        el: '#page',

        template: Handlebars.getTemplate( 'account_statement' ),

        initialize: function() {
                console.info('init:',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() {
                var data = this.collection.toJSON();
        console.log('col', this.collection );  // added
                this.$el.html( this.template( {beatles: data} ));
                return this;
        }
});



col child {length: 1, models: Array[1], _byId: Object, _listenerId: "l2", _events: Object…}
_byId: Object
_events: Object
_listenerId: "l2"
length: 1
models: Array[1]
0: child
_changing: false
_events: Object
_pending: false
_previousAttributes: Object
attributes: Object
amount: 205.99
currency: "USD"
date: "2013-05-13"
id: 13
vendor: "Reebok Outlet"
__proto__: Object
changed: Object
cid: "c3"
collection: child
id: 13
__proto__: Surrogate
length: 1
__proto__: Array[0]
__proto__: Surrogate



<h1>Your Statement</h1>
<table border="1">
    <thead>
        <th>Name</th>
        <th>Email</th>
        <th>Age</th>
    </thead>
    <tbody>
    {{#each beatle}}
        <tr>
            <td>{{this.fname}} {{this.surname}}</td>
            <td>{{this.email}}</td>
            <td>{{this.age}}</td>
        </tr>
    {{/each}}
    </tbody>
</table>



您的声明
名称
电子邮件
年龄
{{{每个披头士乐队}
{{this.fname}{{this.姓氏}}
{{this.email}
{{this.age}}
{{/每个}}

看起来我上面发布的JSON是正确的

问题是我发布的JSON是伪代码，而我从后端系统实际输出的JSON是错误的——输出中的所有ID都是相同的数字（复制/粘贴问题）


对于任何想要创建主干/把手应用程序的人来说，上面的代码似乎是一个很好的起点。
我上面发布的JSON似乎是正确的

问题是我发布的JSON是伪代码，而我从后端系统实际输出的JSON是错误的——输出中的所有ID都是相同的数字（复制/粘贴问题）


对于任何想要创建主干/把手应用程序的人来说，上面的代码似乎是一个很好的起点。
如何加载集合？我已经添加了更多信息——希望这是你想要的我从未使用过把手或把手，但是你确定模板函数需要JSON吗？不应该更像
this.$el.html（this.template（{beatles:this.collection.models}））？您可以通过查找集合的
length
属性来检查集合包含的记录数。添加手柄片段。其余的在我看来没问题。问题似乎在模板中。你如何加载集合？我添加了更多信息——希望这是你想要的。我从未使用过把手或主干，但是你确定模板函数需要JSON吗？不应该更像
this.$el.html（this.template（{beatles:this.collection.models}））？您可以通过查找集合的
length
属性来检查集合包含的记录数。添加手柄片段。其余的在我看来还可以。问题似乎在模板中