Попытка выяснить, как обновить скрытый ввод со значением из выбора в нокаут

Question

Мне очень тяжело обворачивать голову вокруг этого. Я использую KnockoutJS, и у меня есть раскрывающийся список, который можно наблюдать. Когда я изменяю значение этого раскрывающегося списка, я хочу, чтобы он менял скрытый ввод по одному в строке в моей таблице. Мне трудно понять, как установить это значение в функции подписки. Я знаю, что функция подписки вызывается, потому что мой консольный вывод работает.

Вот мой HTML выбрать и часть моей таблицы, которая имеет скрытый вход Я хочу Изменено:

<div data-bind="if: (availableProfitCodes().length > 1)"> 
       <select id="profitCode" data-bind="value: selectedProfitCode, options: availableProfitCodes, optionsText: function(code) { return code.name + ' : ' + code.desc }, optionsValue: 'code', optionsCaption: '-- select a profit code --'"></select> 
      </div> 
<tbody data-bind="foreach: codes"> 
       <tr> 
        <td> 
         <input data-bind="value: itemNo, attr: { name: 'brochureProfitCodes[' + $index() + '].itemNo', id: 'brochureProfitCodes_' + $index() + '__itemNo' }, validationOptions: { errorElementClass: 'input-validation-error' }" class="form-control" readonly="readonly" tabindex="-1" /> 
         <input data-bind="value: profitCode, attr: {name: 'brochureProfitCodes[' + $index() + '].profitCode', id: 'brochureProfitCodes_' + $index() + '__profitCode' }" type="hidden" class="profitCode" /> 
        </td> 

И мой нокаута код (часть не работает находится в функции подписки):

var CodeModel = function(data) { 
     var self = this; 

     self.profitCode = ko.observable(data ? data.profitCode : ''); 

     self.itemNo = data.itemNo; 
     self.brocCode = data.brocCode; 
     self.brochureID = data.brochureID; 
     self.itemDesc = data.itemDesc; 
     self.retail = data.retail; 
     self.wholesale = data.wholesale; 
     self.commission = data.commission; 
    } 

    var codesModel = function(codes) { 
     var self = this; 
     self.availableProfitCodes = ko.observableArray([]); 
     self.selectedProfitCode = ko.observable(); 

     //self.codes = ko.observableArray(codes); 
     //self.codes = ko.observable(new CodeModel()); 
     if(codes != null) { 
      self.codes = ko.observableArray(codes.map(function(code) { return new CodeModel(code) })); 
     }    

     self.selectedProfitCode.subscribe(function(newValue) { 
      console.log("newValue is: " + newValue); 
      self.codes.profitCode(newValue); 
     }); 
    }; 
$(document).ready(function() { 

     var profitCodeInt = Number($.trim($("#pCode").val())); 
     if(profitCodeInt == 0) { // adding a new profit code 
      ... 
     } 
     else if(profitCodeInt > 0) { // editing an existing profit code 
      $.ajax({ 
       url: '@Url.Action("GetProfitCodesJSON", "Brochure")', 
       type: 'POST', 
       success: function(json) { 
        var codesJSON = @Html.Raw(Json.Encode(Model.brochureProfitCodes)); 
        console.log(JSON.stringify(codesJSON)); 
        var itemsJSON = @Html.Raw(Json.Encode(Model.brochureItems)); 
        viewModel = new codesModel(codesJSON); 
        var result = json.profitCodes.filter(function(obj) { 
         return obj.profitCode == profitCodeInt; 
        }); 
        var code = new profitCode(result[0].profitCode, result[0].profitDesc, result[0].profitName); 
        viewModel.availableProfitCodes.push(code); 
        ko.applyBindings(viewModel, $("#profitModal")[0]); 
       } 
      }); 

Answer 1

self.codes является observableArray так и нужно использовать self.codes() и петлю через

var CodeModel = function(data) { 
 
    var self = this; 
 

 
    self.profitCode = ko.observable(data ? data.profitCode : ''); 
 

 
    self.itemNo = data.itemNo; 
 
    self.brocCode = data.brocCode; 
 
    self.brochureID = data.brochureID; 
 
    self.itemDesc = data.itemDesc; 
 
    self.retail = data.retail; 
 
    self.wholesale = data.wholesale; 
 
    self.commission = data.commission; 
 
} 
 

 
var codesModel = function(codes) { 
 
    var self = this; 
 
    self.availableProfitCodes = ko.observableArray(options); 
 
    self.selectedProfitCode = ko.observable(); 
 

 
    //self.codes = ko.observableArray(codes); 
 
    //self.codes = ko.observable(new CodeModel()); 
 
    if (codes != null) { 
 
    self.codes = ko.observableArray(codes.map(function(code) { 
 
     return new CodeModel(code) 
 
    })); 
 
    } 
 

 
    self.selectedProfitCode.subscribe(function(newValue) { 
 
    self.codes().forEach(function(code) { code.profitCode(newValue); }); 
 
    }); 
 
}; 
 

 
var initCodes = [{ profitCode: 'ABC', itemNo: 1}, { profitCode: 'DEF', itemNo: 2 }]; 
 
var options = [ 
 
    { name: 1, desc: 'one', code: 'IJK' }, 
 
    { name: 2, desc: 'two', code: 'LMN' }, 
 
    { name: 3, desc: 'three', code: 'OPQ' } 
 
]; 
 

 
ko.applyBindings(new codesModel(initCodes));

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<div data-bind="if: (availableProfitCodes().length > 1)"> 
 
    <select id="profitCode" data-bind="value: selectedProfitCode, options: availableProfitCodes, optionsText: function(code) { return code.name + ' : ' + code.desc }, optionsValue: 'code', optionsCaption: '-- select a profit code --'"></select> 
 
</div> 
 
<table> 
 
    <tbody data-bind="foreach: codes"> 
 
    <tr> 
 
     <td> 
 
     <input data-bind="value: itemNo, attr: { name: 'brochureProfitCodes[' + $index() + '].itemNo', id: 'brochureProfitCodes_' + $index() + '__itemNo' }, validationOptions: { errorElementClass: 'input-validation-error' }" class="form-control" readonly="readonly" 
 
     tabindex="-1" /> 
 
     <input data-bind="value: profitCode, attr: {name: 'brochureProfitCodes[' + $index() + '].profitCode', id: 'brochureProfitCodes_' + $index() + '__profitCode' }" type="hidden" class="profitCode" /><span data-bind="text: profitCode"></span> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>