Ember 数据父/子模型和 json

Question

我想为自己一劳永逸地记录（并永久记录！）父母和孩子之间的关系以及理想的 json 结构，以及路由和控制器的基本示例。

当我（希望）得到答案和 cmets 时，我会更新问题以反映最佳实践。

所以，我有我的 ember 模型：

App.Customer  = DS.Model.extend({
    name: DS.attr('string' ),
    orders: DS.hasMany("order")
});

App.Order  = DS.Model.extend({
    carrier: DS.attr('string' ),
    customer: DS.belongsTo("customer")
    orderlines: DS.hasMany("orderline")

});

App.Orderline  = DS.Model.extend({
    order: DS.belongsTo("order"),
    item: DS.belongsTo("item"),
    price: DS.attr('number'),
    qty: DS.attr('number'),
});

App.Item  = DS.Model.extend({
    name: DS.attr('string'),
    orderlines: DS.hasMany("orderline")
});

问题 1：这些模型定义是否正确？

我可以采取几种方法来查看这些数据：

• 客户标签 |订单标签 |订单行标签
• 客户页面 -> 订单页面 -> 订单行页面
• 树状视图
• 谁能推荐任何其他可以显示此分层数据的 JS 小部件？

问题 2：

每一个都需要哪些路由器/控制器？

我有选项 2) 可以显示客户，但是当我单击客户的订单链接时，我会收到所有订单。可能是我的 json 错误.. 或者我更可能不知道如何显示所选客户的所有订单。或者两者都有:(

我目前有：

{"customers":[
  {"name":"foobar inc","id":"0x181","orders":["0x386","0x3a4"]},
  {"name":"barfoo ltd","id":"0x182","orders":["0x3de","0x3fd"]} ],   
 "orders":[
   {"carrier":"Standard Mail","id":"0x386","customer_id":"0x181"},
   {"carrier":"FlyByNight Courier","id":"0x3a4","customer_id":"0x181"},
   {"carrier":"Standard Mail","id":"0x3de","customer_id":"0x182"},
   {"carrier":"FlyByNight Courier","id":"0x3fd","customer_id":"0x182"} ]}

问题 3： 这是正确的吗？ （我可以使 json 以任何格式出现，因此最好创建最适合 ember-data 的 json 结构）。

问题 4：此时我是否应该包括相关数据（所有客户、所有订单、所有订单行）？或者最好不要包含子数据，而是从服务器按需获取这些数据？

我将暂时离开它 - 希望我能尽快开始理解嵌套数据！谢谢。

Answer 1

问题 1 我觉得这些模型定义不错。

问题 2 您可能希望混合使用选项 #1 和 #2。选项卡可让您查看每个模型的完整列表，但可以在 /customers 页面上进行分层钻取。您需要的确切路线取决于您希望在应用中提供的确切 URL，这些 URL 将对应于您要显示的屏幕/视图。

假设您想要这些网址/屏幕

/customers - 所有客户的列表

/customers/1 - 客户 #1 的详细信息

/customers/1/orders - 客户 #1 的所有订单

/customers/1/orders/1 - 订单 #1 的详细信息（包括 OrderLines）

那么您的路线将是：

App.Router.map(function() {
    this.resource('customers');
    this.resource('customer', { path: '/customers/:customer_id' }, function(){
        this.resource('orders');
        this.resource('order', { path: '/orders/:order_id'});
    });
});

问题 3 是的，JSON 看起来是正确的。

问题 4 这取决于您的应用的需求。可能您不想在单个请求中包含整个数据树（客户 -> 订单 -> 订单行 -> 项目）。您可能希望在用户下树时逐步加载内容。

例如，您首先希望仅加载客户列表，然后当用户点击客户时，您会发出请求以获取该客户的所有订单。以此类推，从树上下来。

这是一个展示总体思路的 JSBin：http://jsbin.com/ucanam/1074/edit

注意hasMany 关系是用{async:true} 定义的。这允许按需查找它们，而不是与父模型一起加载。

如果您切换到RESTAdapter，当它尝试为客户加载订单列表时，它会发出如下请求：

/orders?ids[]=0x3de&ids[]=0x3fd

[UPDATE] : 响应 cmets。

因此，对于您请求的 url 结构： > >客户列表 > -> 客户详细信息 > -> 订单列表 > -> 订单详细信息 > -> 订单行列表 > -> 订单行详细信息

您与您的 JSBin 非常接近。让您感到困惑的是模板嵌套的工作方式。

'order' 模板（如果存在）为匹配/orders/xxx 或/orders/xxx/* 的所有路由呈现。如果路径中还有其他部分，例如/orderlines，那么这些模板会被渲染到'order' 模板中。但是，由于您的 'order' 模板没有 {{outlet}} ，因此 'orderlines' 模板没有可渲染的内容。

这是一个稍加修改的 JSBin：http://jsbin.com/iKIsisO/3/edit

唯一的变化是将{{outlet}} 添加到'order' 模板的底部。

现在，在下面渲染orderlines，或者在主要订单详细信息内部可能不是您想要的。您很可能希望订单行替换其他订单信息。在这种情况下，您可以将'order' 模板重命名为'order/index'。 （您也可以从OrderController 中删除OrderRoute 和needs）。

另一个 JSBin，模板重命名：http://jsbin.com/iDiMOCO/1/edit

那么，这里发生了什么？

以Order 模型为例，当您访问/orders 路由以及适用于集合的任何其他路由（/orders/new、/orders/some_custom_batch_thing）时，如果出现以下情况，则会呈现主'orders' 模板它存在，然后子路径模板被渲染成'orders'。如果'orders' 模板不存在，则子路径模板将呈现到紧接在链上游的{{outlet}}。 /orders 路由是一种特殊情况，因为它的子模板被隐式假定为orders/index。类似地，对于/orders/xxx 和适用于单个Order 的任何其他路由，首先渲染'order' 模板（如果存在），然后渲染子路径模板，要么渲染到'order'，要么渲染到最直接的父母{{outlet}}。同样对于/orders/xxx，'order/index' 模板是隐式子路径模板。

• /orders :: 'orders' -> 'orders/index'
• /orders/new :: 'orders' -> 'orders/new'
• /order/xxx :: 'order' -> 'order/index'
• /orders/xxx/edit :: 'order' -> 'order/edit'

所以，'orders' 和 'order' 模板真的有点像每个模型布局模板，可用于以一致的方式装饰子路径。

在模板中呈现模板名称的最终 JSBin，并添加了一些额外的模板以充当“模型布局”：http://jsbin.com/iKIsisO/2/edit

我希望一切都有意义。