Master Detail

by Kevin McIsaac

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>

Company: <select data-bind="options: xDB, value: companyList, optionsText: 'name', optionsCaption: 'Select...'"></select>
<span data-bind="with: companyList">
  <P> useCaseList: <span data-bind="text: JSON.stringify(useCaseList)">xx</span></P>
  <select data-bind="options: useCaseList, value: Models, optionsText: 'name', optionsCaption: 'Select...'"></select>
	
	</span>

<button  data-bind="click: show" type="button" >Show...</button>

<!--
      <span class=company data-bind="with: selectedUseCase">
        <span data-bind="text: useCase.company"></span> 
        <table id="models">
          <thead>
            <tr>
              <th align="left">value</th><th>Item</th>
            </tr>
          </thead>
          <tbody data-bind="foreach: models">
          <tr>
             <td> <input data-bind="value: value" type:"number"></td>
              <td> <input data-bind="value: item"></td>
              <td> <span data-bind="click: remove">Remove</span></td> 
          </tr>
      </tbody>
      </table>

     <p>Total: <span data-bind="text: useCase.totalx"></span></p>
     </span>

    <button  data-bind="click: add" type="button" >Add row...</button>
    <button  data-bind="click: save" type="button" >Save...</button>
    <button  data-bind="click: show" type="button" >Show...</button>
 <p  data-bind="text: JSON.stringify(ko.mapping.toJS(selectedUseCase))" ></button>
 
 </span>

-->

JavaScript

var DB =[
	{ name: "modocorp", 
  	cID : 1,
    useCaseList:  
    	[
         {useCaseID: 1,
				  name: "Marketing",
          totalx: 7,
          models : [ {value: 1, name: "Conversion Rate"},
                     {value: 2, name: "Return Rate"}]
          },
         {useCaseID: 2,
				  name: "Sales",
          totalx: 1,
          models : [{value: 10, name: "SQL"}, 
                    {value: 20, name: "MQL"}]
         }
			]
	},
  { name: "Domo", 
    cID : 1,
    useCaseList:  
    	[
         {useCaseID: 10,
				  name: "Logistics", 
          totalx: 70,
          models : [ {value: 10, name: "Conversion"},
                     {value: 20, name: "Return "}]
          },
         {useCaseID: 20,
				  name: "Other",
          totalx: 1,
          models : [{value: 10, name: "SQL"}, 
                    {value: 20, name: "MQL"}]
         }
			]
	}
]
console.log("DB...")
console.log(DB);
//alert(`Use case list ${JSON.stringify(ko.mapping.toJS(vUC))}`);
function viewModel() {
		var self=this;
    self.xDB = ko.observableArray(DB);
    self.companyList = ko.observable();
    self.useCaseList = ko.observable();
    self.Models = ko.observable();
		self.value = ko.observable();
    
     self.useCaseList.subscribe(function() {
        self.selectedUseCase(undefined);
    });
		
		self.companyList.subscribe(function() {
        self.useCaseList(undefined);
    });
    
    self.xDB.subscribe(function() {
        self.companyList(undefined);
    });

    self.show = function() {console.log('show');console.log(self.companyList)};
    self.add = function() {};
    self.remove = function(line) {  };
    self.save = function() { };

}


//console.log('view Model...');
//console.log(viewModel);

ko.applyBindings(viewModel());