Backbone.js 一对多关系

ncgqoxb0  于 2022-11-10  发布在  其他
关注(0)|答案(2)|浏览(138)

我是Backbone.js的初学者,我很难在两个Backbone模型之间建立一对多的关系,并将这些数据显示到html表格行中。我正在使用一台可以有多个订单的机器。数据将看起来像:

  • 机器10具有订单1、2、5、9。
  • 机器14具有订单3、4、6。

机器和订单与一个FK machine_id按顺序耦合。我试图使TR元素与第一个元素TH成为机器,在第二个/第三个TH上,我想显示属于机器的订单。
"所以我问的问题是“

  • 我如何在我 Backbone 模型中建立一对多的关系。
  • 如何在下划线模板中创建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>
zzwlnbp8

zzwlnbp81#

假设 您 有 一 个 名 为 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]
}]

格式
现在 可以 将 其 传递 给 模板 函数 , 该 函数 迭代 每个 条目 并 呈现 它 。

hk8txs48

hk8txs482#

我看到您已经通过在应用中引用您的machine_id建立了一对多关系。订单模型,至于您的第二个问题,
如何在下划线模板中创建TR元素,以显示属于某台机器订单。
我在您的模板中看不到<tr></tr>
在 Backbone.js 中,模板只是一个不支持逻辑的哑html组件,所有的逻辑都驻留在视图中,理想情况下,您可以为订单创建一个集合,并通过machine_id字段查询订单集合。

相关问题