3

我正在尝试创建一个嵌套的关系骨干项目，但我真的很挣扎。我正在尝试做的大致想法如下所示，但我在客户端上调用 fetch() 时的印象是，会根据以 JSON 形式返回的预订自动创建一些预订。

我的 JSON 格式可以在 MVC 的轮廓下方看到：

/****************************************************
/* CLIENT MODEL - Logically the top of the tree
/* has a BookingsCollection containing numerous Booking(s)                                                                             
/*  Client
/*      -Bookings               [BookingsCollection]
/*          -Booking            [Booking]
/*          -Booking            [Booking]
/*****************************************************/
var Client = Backbone.RelationalModel.extend({

    urlRoot: '/URL-THAT-RETURNS-JSON/',

    relations: [
        {
            type: Backbone.HasMany,
            key: 'Booking',
            relatedModel: 'Booking',
            collectionType: 'BookingsCollection'
        }
    ],

    parse: function (response) {

    },

    initialize: function (options) {
        console.log(this, 'Initialized');
    }

});


var Booking = Backbone.RelationalModel.extend({

    initialize: function (options) {
        console.log(this, 'Initialized');
    }

});

var BookingsCollection = Backbone.Collection.extend({

    model: Booking

});

返回的近似 JSON

任何概述我做错了什么的帮助将不胜感激。

谢谢

编辑

感谢您花时间发布反馈，这正是我所希望的。

如果您不努力手动设置属性，那么 JSON 是否会在物理上定义模型的实际属性？换句话说，如果我返回的 JSON 与您上面建议的一样，Backbone 会简单地创建一个 Client 对象（具有 4 个属性 id、title、firstname 和 surname）以及 2 个 Booking 对象（每个具有 4 个属性并且大概BookingsCollection 的每个成员）？

如果是这种情况，引用每个对象的属性的格式是什么？当我设置一个非骨干关系迷你应用程序时，我最终遇到了一种情况，我可以使用 Client.Attribute 或 Booking[0].EventDate 来引用属性。我似乎无法使用您上面概述的格式执行此操作。

再次感谢。

4

1 回答 1

3

默认情况下，返回的 JSON 不是 Backbone 或 Backbone-Relational 所期望的。

Backbone 和 Backbone-Relational 的期望是：

{
    "id": "123456",
    "Title":"Mr",
    "FirstName":"Joe",
    "Surname":"Bloggs",
    "Bookings": [
        {
            "id": "585462542",
            "EventName": "Bla",
            "Location":"Dee Bla",
            "EventDate":"November 1, 2012"
        },
        {
            "id": "585462543",
            "EventName": "Bla",
            "Location":"Dee Bla",
            "EventDate":"November 1, 2012"
        }
    ]
}

要使用您的响应，您需要parse在 Client 模型上创建一个函数，该函数返回我在上面发布的结构。

使用我的示例 JSON 的模型定义的 jsFiddle 示例：http: //jsfiddle.net/edwardmsmith/jVJHq/4/

其他注意事项

  • Backbone 期望ID字段默认命名为“id”。要将另一个字段用作ID模型，请使用Model.idAttribute
  • 预订集合的“键”我更改为“预订”

示例代码：

Client = Backbone.RelationalModel.extend({

    urlRoot: '/URL-THAT-RETURNS-JSON/',

    relations: [
        {
            type: Backbone.HasMany,
            key: 'Bookings',
            relatedModel: 'Booking',
            collectionType: 'BookingsCollection'
        }
    ],

    parse: function (response) {

    },

    initialize: function (options) {
        console.log(this, 'Initialized');
    }

});


Booking = Backbone.RelationalModel.extend({

    initialize: function (options) {
    console.log(this, 'Initialized');
    }

});

BookingsCollection = Backbone.Collection.extend({

    model: Booking

});

myClient = new Client(    {
        "id": "123456",
        "Title":"Mr",
        "FirstName":"Joe",
        "Surname":"Bloggs",
        "Bookings": [
            {
                "id": "585462542",
                "EventName": "Bla",
                "Location":"Dee Bla",
                "EventDate":"November 1, 2012"
            },
            {
                "id": "585462543",
                "EventName": "Bla",
                "Location":"Dee Bla",
                "EventDate":"November 1, 2012"
            }
        ]
    });


console.log(myClient);​

发布编辑

是的，JSON 几乎定义了模型的属性。您可以使用 、 和 的组合 parse()来defaults更好validate()地控制哪些属性是有效的和允许的。

在 Backbone 模型上读取和设置属性的规范方法是通过get()、escape()和set()函数。

set尤其重要，因为这会进行大量的内务处理，例如针对您的validate函数（如果有）验证属性和值，并触发您的视图将侦听的模型的更改事件。

在此答案中的具体情况下，您可能

myClient.get('Title');  // => "Mr"
myClient.get('Bookings'); //=> an instance of a BookingsCollection with 2 models.
myClient.get('Bookings').first().get('Location'); //=> "Dee Bla"
myClient.get('Bookings').last().get('Location');  //=> "Dee Bla"
myClient.get('Bookings').first().set({location:"Bora Bora"}); 
myClient.get('Bookings').first().get('Location'); //=> "Bora Bora"
myClient.get('Bookings').last().get('Location');  //=> "Dee Bla"
于 2012-07-03T19:41:34.087 回答