Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/391.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/82.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 主干一对多关系_Javascript_Html_Backbone.js_Underscore.js_Lodash - Fatal编程技术网

Javascript 主干一对多关系

Javascript 主干一对多关系,javascript,html,backbone.js,underscore.js,lodash,Javascript,Html,Backbone.js,Underscore.js,Lodash,我是Backbone.js的初学者,我很难在两个主干模型之间建立一对多关系,并将这些数据显示在html选项卡行中。 我正在使用一台可以有多个订单的机器。数据如下所示: 机器10的订单为1、2、5、9 机器14的订单为3、4、6 机器和订单按顺序与FK机器id耦合。 我试图用第一个元素TH来制作TR元素,在第二个/第三个元素TH上,我想显示属于机器的订单 所以我问的问题是: 如何在我的主干模型中建立这种一对多关系 如何在下划线模板中创建此TR元素以显示属于机器的订单 以下是订单和机器的型号

我是Backbone.js的初学者,我很难在两个主干模型之间建立一对多关系,并将这些数据显示在html选项卡行中。 我正在使用一台可以有多个订单的机器。数据如下所示:

  • 机器10的订单为1、2、5、9
  • 机器14的订单为3、4、6
机器和订单按顺序与FK机器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>

//等
//等
//等

我看到您已经通过在应用程序订单模型中引用您的
机器id
建立了一对多关系 至于你的第二个问题

如何在下划线模板中显示此TR元素 属于机器的订单

我在您的模板中没有看到


在主干网中,模板只是一个不支持逻辑的哑html组件。所有逻辑都将驻留在视图中,理想情况下,您可以拥有订单集合,并通过
机器id
字段查询订单集合。

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

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]
}]
现在,您可以将其传递给模板函数,该函数迭代每个条目并呈现它