knockout - Ich versuche Daten aus 2 Datensätzen zu verwenden

Question

Ich kämpfe mit diesem. Ich versuche, Daten aus zwei verschiedenen Datensätzen in meinem View-Modell zu verwenden. Ich bin immer noch sehr neu mit Knockout, also bin ich mir sicher, dass ich etwas sehr falsch mache. Es beschwert sich darüber, nicht zu wissen, was Großhandel ist, aber das ist von einer anderen Liste/Menge. Also bin ich mir nicht sicher, wie ich beide dorthin bringen soll. Hier ist mein Code-Schnipsel:

var viewModel; 
 

 
var profitCode = function(code, desc, name) { 
 
    this.code = code; 
 
    this.desc = desc; 
 
    this.name = name; 
 
}; 
 

 
var codeModel = function(codes, items) { 
 
    var self = this; 
 
    self.codes = ko.observableArray(codes); 
 
    self.items = ko.observableArray(items); 
 
}; 
 

 
$(document).ready(function() { 
 
    var codesJSON = '[{"ExtensionData":null,"brochureId":0,"commission":0,"itemNo":"1000","profitCode":0,"profitCodeName":null,"wholesale":0},{"ExtensionData":null,"brochureId":0,"commission":0,"itemNo":"1100","profitCode":0,"profitCodeName":null,"wholesale":0},{"ExtensionData":null,"brochureId":0,"commission":0,"itemNo":"1120","profitCode":0,"profitCodeName":null,"wholesale":0},{"ExtensionData":null,"brochureId":0,"commission":0,"itemNo":"1150","profitCode":0,"profitCodeName":null,"wholesale":0},{"ExtensionData":null,"brochureId":0,"commission":0,"itemNo":"1151","profitCode":0,"profitCodeName":null,"wholesale":0},{"ExtensionData":null,"brochureId":0,"commission":0,"itemNo":"120","profitCode":0,"profitCodeName":null,"wholesale":0},{"ExtensionData":null,"brochureId":0,"commission":0,"itemNo":"125","profitCode":0,"profitCodeName":null,"wholesale":0},{"ExtensionData":null,"brochureId":0,"commission":0,"itemNo":"1500","profitCode":0,"profitCodeName":null,"wholesale":0},{"ExtensionData":null,"brochureId":0,"commission":0,"itemNo":"1600","profitCode":0,"profitCodeName":null,"wholesale":0},{"ExtensionData":null,"brochureId":0,"commission":0,"itemNo":"170","profitCode":0,"profitCodeName":null,"wholesale":0}]'; 
 
    var itemsJSON = '[{"ExtensionData":{},"brocCode":"1000","brochureId":1,"itemDesc":"Bicycle","itemNo":"1000","itemOrder":1,"prizeNum":0,"retail":13.5},{"ExtensionData":{},"brocCode":"1100","brochureId":1,"itemDesc":"Front Wheel","itemNo":"1100","itemOrder":2,"prizeNum":0,"retail":35},{"ExtensionData":{},"brocCode":"1120","brochureId":1,"itemDesc":"Spokes","itemNo":"1120","itemOrder":3,"prizeNum":0,"retail":12.5},{"ExtensionData":{},"brocCode":"1150","brochureId":1,"itemDesc":"Front Hub","itemNo":"1150","itemOrder":4,"prizeNum":0,"retail":5},{"ExtensionData":{},"brocCode":"1151","brochureId":1,"itemDesc":"Axle Front Wheel","itemNo":"1151","itemOrder":5,"prizeNum":0,"retail":14},{"ExtensionData":{},"brocCode":"120","brochureId":1,"itemDesc":"Loudspeaker, Black, 120W","itemNo":"120","itemOrder":6,"prizeNum":0,"retail":12.5},{"ExtensionData":{},"brocCode":"125","brochureId":1,"itemDesc":"Socket Back","itemNo":"125","itemOrder":7,"prizeNum":0,"retail":10},{"ExtensionData":{},"brocCode":"1500","brochureId":1,"itemDesc":"Lamp","itemNo":"1500","itemOrder":8,"prizeNum":0,"retail":6},{"ExtensionData":{},"brocCode":"1600","brochureId":1,"itemDesc":"Bell","itemNo":"1600","itemOrder":9,"prizeNum":0,"retail":8},{"ExtensionData":{},"brocCode":"170","brochureId":1,"itemDesc":"Brake","itemNo":"170","itemOrder":10,"prizeNum":20,"retail":5.5}]'; 
 

 
\t var profitCodes = '[{"ExtensionData":{},"profitCode":1,"profitDesc":"A - STANDARD 40% PROFIT","profitName":"40A"},{"ExtensionData":{},"profitCode":2,"profitDesc":"B - STANDARD 40% PROFIT","profitName":"40B"}]'; 
 
      
 
\t viewModel = new codeModel(JSON.parse(codesJSON), JSON.parse(itemsJSON)); 
 

 
    //console.log(viewModel); 
 
    ko.applyBindings(viewModel, $("#profitModal")[0]); 
 
        
 
      /* 
 
      $.ajax({ 
 
       url: '@Url.Action("GetProfitCodesJSON", "Brochure")', 
 
       type: 'POST', 
 
       data: { editing: false, brochureID: $.trim($("#brochureId").val()) }, 
 
       success: function(json) { 
 
        var codesJSON = @Html.Raw(Json.Encode(Model.brochureProfitCodes)); 
 
        console.log(JSON.stringify(codesJSON)); 
 
        var itemsJSON = @Html.Raw(Json.Encode(Model.brochureItems)); 
 
        console.log(JSON.stringify(itemsJSON)); 
 
        viewModel = new codeModel(codesJSON, itemsJSON); 
 
        $.each(json.profitCodes, function(index, value) { 
 
         var code = new profitCode(value.profitCode, value.profitDesc, value.profitName); 
 
         viewModel.availableProfitCodes.push(code); 
 
        }); 
 
        console.log(viewModel); 
 
        ko.applyBindings(viewModel, $("#profitModal")[0]); 
 
       } 
 
      }); 
 
\t \t \t \t \t \t */ 
 
     });

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h4>Add Profit Code</h4> 
 

 
<div class="modal-body" id="profitModal"> 
 
<form action="/Brochure/SaveProfitCodes" id="myForm" method="post"> 
 
     <hr /> 
 
     <div class="row"> 
 
      <table class="table table-bordered table-striped" id="profitCodes"> 
 
       <thead> 
 
        <tr> 
 
         <th> 
 
          Item No 
 
         </th> 
 
         <th> 
 
          Bro Code 
 
         </th> 
 
         <th width="38%"> 
 
          Item Desc 
 
         </th> 
 
         <th width="14%"> 
 
          Retail 
 
         </th> 
 
         <th> 
 
          Wholesale 
 
         </th> 
 
         <th> 
 
          Commission 
 
         </th> 
 
        </tr> 
 
       </thead> 
 
       <tbody data-bind="foreach: items"> 
 
        <tr> 
 
         <td> 
 
          <input data-bind="value: itemNo, validationOptions: { errorElementClass: 'input-validation-error' }" class="form-control" readonly="readonly" /> 
 
         </td> 
 
         <td> 
 
          <input data-bind="value: brocCode, validationOptions: { errorElementClass: 'input-validation-error' }" class="form-control" readonly="readonly" /> 
 
         </td> 
 
         <td> 
 
          <input data-bind="value: itemDesc, validationOptions: { errorElementClass: 'input-validation-error' }" class="form-control" readonly="readonly" /> 
 
         </td> 
 
         <td> 
 
          <input data-bind="value: retail, validationOptions: { errorElementClass: 'input-validation-error' }" class="form-control" readonly="readonly" /> 
 
         </td> 
 
         <td> 
 
          <input data-bind="value: wholesale, validationOptions: { errorElementClass: 'input-validation-error' }" class="form-control" /> 
 
         </td> 
 
         <td> 
 
          <input data-bind="value: commission, validationOptions: { errorElementClass: 'input-validation-error' }" class="form-control" /> 
 
         </td> 
 
        </tr> 
 
      </table> 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
      <button type="button" id="profitCodeSave" class="btn btn-primary">Save Changes</button> 
 
     </div> 
 
</form> 
 
</div>

Und hier ist meine Geige, die ich habe dank @ adam-Wolski arbeiten: https://jsfiddle.net/j9hskr51/3/

Answer 1

Es fühlt sich an, als ob Sie zwei Sets mit einem bestimmten Attribut verbinden möchten. Ich nehme an, dass Sie sich ihnen durch itemNo Attribut anschließen möchten. Sie können eine einfache Funktion schreiben, die das tut:

items.map(function(item){ 
    return Object.assign(item, codes.find(function(code){return code.itemNo === item.itemNo})); //NOTE: both Object.assign and find() are ES6 
}) 

daher eine beobachtbare Array erstellen aus einer als solche eingestellt joined:

var codeModel = function(codes, items) { 
    var self = this; 
    self.items = ko.observableArray(items.map(function(item){ 
    return Object.assign(item, codes.find(function(code){return code.itemNo ===  item.itemNo})); //NOTE: both Object.assign and find() are ES6 
})); 
}; 

Answer 2

Knockout beschwert sich über wholesale weil du bist Bindung an viewModel.items, die kein Feld namens wholesale hat, das jedoch ein Mitglied von viewModel.codes ist. Ich nehme an, Ihre Absicht war, Felder von beiden Arrays zur selben Zeit an dieselbe Zeile zu binden, richtig? Soweit ich weiß, ist es in Knockout nicht möglich, also könnte die mögliche Lösung darin bestehen, ein neues Array zu definieren, das aus den beiden ursprünglichen erstellt wurde, und es dann für das Binden zu verwenden.