骨干一对多关系答案

【问题标题】：Backbone one to many relationschip骨干一对多关系
【发布时间】：2017-10-19 07:51:36
【问题描述】：

我是 Backbone.js 的初学者，我很难在两个 Backbone 模型之间建立一对多的关系芯片，并将这些数据显示到 html 表格行中。我正在使用一台可以有多个订单的机器。数据将如下所示：

机器 10 有订单 1,2,5,9。
机器 14 有订单 3,4,6。

机器和订单按顺序加上一个FK machine_id。我正在尝试将带有第一个元素 TH 的 TR 元素作为机器，在第二个/第三个 TH 上我想显示属于机器的订单。

所以我要问的问题是：

如何在我的主干模型中建立这种一对多关系。
如何在我的下划线模板中创建这个 TR 元素以显示属于机器的订单。

以下是订单和机器的模型：

app.Machine = Backbone.Model.extend({
    defaults : {
         machine_id : "",  
         status : "",
         description : "",
    },
});
app.Order = Backbone.Model.extend({
    defaults: {
        order_id: "",
        description: "",
        amount: "",,
        begin_date:"",
        end_date:"",
        machine_id: ""
    },
});
app.MachineList = Backbone.Collection.extend({
    model: app.Machine
});

观看次数：

 app.MachineView = Backbone.View.extend({
    className: 'MachineRow',
    template: _.template($('#Machine_Template').html()),
    render: function(){
        this.$el.html(this.template(this.model.attributes));
        return this;
    }
});
app.MachineListView = Backbone.View.extend({
    el: '#Machine',

    initialize: function(initialMachine){
        this.collection = new app.MachineList(initialMachine);
        this.render();
    },
    render: function(){
        this.collection.each(function(item){
            this.renderMachine(item);
            filterOrder(item.get('machine_id'));
        }, this);
    },
    renderMachine: function(item){
        var machineView = new app.MachineView({
            model: item
        });
        $(machineView.render().el).appendTo(this.$el)
    }
});

HTML 代码：看起来像这样？？

<script id="machine_template" type="text/template">            
        <th>
            <%= machine_id %> //etc
        </th>
        <th>
            <%= order_id %> //etc
        </th>
        <th>
            <%= order_id %> //etc
        </th>
  </script>

【问题讨论】：

标签： javascript html backbone.js underscore.js lodash

【解决方案1】：

假设您有一个名为 orders 的订单集合，您可以执行以下操作：

let renderData = machineList.map(machine -> {
  return {
    machine: machine,
    orders: orders.where({machine_id: machine.get('id')}
  }
});

这应该给你一个类似于

的结构

[{
   machine: machineModel1,
   orders: [orderModel1, orderModal2]
},{
   machine: machineModel2,
   orders: [orderModel3, orderModal4]
}]

您现在可以将它传递给您的模板函数，该函数遍历每个条目并呈现它。

【讨论】：

【解决方案2】：

我看到您已经通过在 app.Order 模型中引用您的 machine_id 建立了一对多关系至于你的第二个问题，

如何在我的下划线模板中制作这个 TR 元素以显示属于机器的订单。

我在您的模板中没有看到 <tr></tr>。

在主干中，模板只是一个不鼓励逻辑的愚蠢的 html 组件。您的所有逻辑都将驻留在您的视图中，理想情况下，您可能有一个订单集合，并通过machine_id 字段查询您的订单集合。

【讨论】：