There is given a html table of orders. Each it is an OrderHeader object that has a drill-down list of OrderDetails. I want to implement this in the MVC pattern.
I was thinking that every order detail in the list should be a OrderDetail_controller. Below it's some approach.
The order detail:
const OrderDetail_model = function (data) {
this.id = data.id;
this.status = { text: data.status, id: data.id};
this.quantity = data.quantity;
};
OrderDetail_model.prototype = {
set status(data){
this.status.id = data.id;
this.status.text = data.text;
},
set quantity(data){ this.quantity = data}
};
const OrderDetail_view = function(model){
this.model = model;
this.init();
this.onQuantityChange = new Event(this);
this.onPriceChange = new Event(this);
this.onRemoveButtonClick = new Event(this);
this.init();
this.render();
};
OrderDetail_view.prototype = {
init(){
this.cache_document();
this.setup_events();
},
cache_document(){
this.container = $("<tr>..etc");
this.quantity_input = this.container.find("[name='detail-qty']");
this.price_input = this.container.find("[name='detail-price']");
this.remove_button = this.container.find(".btn-removeArticle");
},
setup_events(){
this.quantity_input.change(e => this.onQuantityChange.notify(e.target.value))
this.price_input.change(e => this.onPriceChange.notify(e.target.value))
this.remove_button.click(e => (this.onRemoveButtonClick.notify(this)).bind(this))
},
};
OrderDetail_controller = function(model,view){
this.model = model;
this.view = view;
render () => { return this.view.container } ;
}
The order header :
OrderHeader_model = function(){
this.type = null;
this.status = null;
this.details = [];
etc..
this.onAddDetail = new Event(this);
this.add_detail => (data){
var detail_model = new OrderDetail_model(data);
var detail_view = new OrderDetail_view(detail_model);
var detail_controller = new OrderDetail_controller(detail_model, detail_view);
this.details.push(detail_controller);
this.onAddDetail.notify(this, detail_controller);
}
etc..
};
OrderHeader_view = function(model){
this.model = model;
this.addDetailButton = $("button");
this.detailsTableElement = $("<table><tbody></tbody></table>");
this.onAddDetail = new Event();
this.model.onAddDetail.attach((sender, detail_controller) => this.update_details_view(detail_controller));
this.addDetailButton.click( e => this.onAddDetail.notify(e, etc..));
this.update_details_view = (detail_controller) => {
//update the dom container of oder details
var detail_TR_element = detail_controller.render();
this.detailsTableElement.find("tbody").append( detail_TR_element );
}
}
OrderHeader_controller = function(model, view){
this.view.onAddDetail.attach((sender,data) => this.addDetail(sender,data));
this.addDetail = (sender,data) => {
this.model.addDetail(data);
}
}
A new orderDetail controller object it's created in the OrderHeader_model in the add_detail method and pushed into the details holder in the OrderHeader_model.
This way I suppose I shoul have full control over the order detail view and model within the OrderHeader_model.
Am I on the right track on implementing things?
Aucun commentaire:
Enregistrer un commentaire