dimanche 15 juillet 2018

JavaScript table of objects in MVC

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