骨干一对多关系芯片
问题描述:
我是Backbone.js的初学者,我很难在两个Backbone模型之间建立一对多关系芯片,并将这些数据显示在html tabel行中。 我正在使用可以有多个订单的机器。数据将如下所示:骨干一对多关系芯片
- 机器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>
答
假设你有命令,称为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]
}]
现在,您可以通过给你的模板函数迭代每个条目并呈现它。
答
我看你已经被你的machine_id
在app.Order模型 并为您的第二个问题,
如何使内这个TR元素引用建立一对多的关系我下划线模板显示 属于机器的订单。
我没有在模板中看到<tr></tr>
。
在主干中,模板只是一个愚蠢的html组件,其中的逻辑是不鼓励的。您的所有逻辑都将驻留在您的视图中,理想情况下,您可能会收到订单的集合,并通过machine_id
字段查询您的订单集合。