using knockout and durandal js foreach binding to duplicate section, but all the duplicates are taking same values when editing

Question

i'm new to using the durandal Js foreach binding, i wanted to show the same fieldset multiple times according to the number of values in a selectlist and when i add an element to this list a new fieldset is shown, this is working properly and same fieldset is generated multiple times according to the selectlist elements, the problem is, my fieldset has lots of textfields and lists, and whenever i type something in a textfield or select a date in a kendodatepicker or any input, the same value is shown in all the fieldset and i want to actually insert different data for each fieldset for each element in my list, this is a little chunk with just one input of how my html is looking for now

<div>
<div data-bind="foreach: ListQRFQ" >
<fieldset data-bind="disable : $parent.isUpdateDisabled()">
<div class="card shadow-sm m-b-10">
<div class="card-header">
   <h5> Request </h5>
</div>
<div class="card-body">
   <div class="form-row">
      <div class="form-group col-md-4 " data-bind="validationElement: $parent.IdPricing">
         <label for="Pricing" class="control-label">Pricing</label>
         <select id="Pricing" class="form-control"
            data-bind="options: $parent.Pricing, optionsText: 'RepositoryName', optionsValue: 'Id', value: $parent.IdPricing, optionsCaption:'select item...'"></select>
      </div>
      <div class="form-group col-md-4" data-bind="validationElement: $parent.IdFee">
         <label for="Fee" class="control-label">Fee</label>
         <select id="Fee" class="form-control "
            data-bind="options: $parent.Fee, optionsText: 'RepositoryName', optionsValue: 'Id', value: $parent.IdFee, optionsCaption:'select item...'"></select>
      </div>
      <div class="form-group col-md-4" data-bind="validationElement: $parent.DetailsofFee">
         <label for="DetailsofFee" class="control-label">Details of Fee</label>
         <input type="text" id="DetailsofFee" name="DetailsofFee" class="form-control "
            data-bind="value: $parent.DetailsofFee">
      </div>
   </div>
</div>

if i edit this part of any one of the fieldsets , all the others take the same value automatically and i can't figure out which data-bind is wrong or which part am i missing for the javascript part i am just creating the empty array of objects

 self.ListRFQ = ko.observableArray([]);

and then when reading the data from the data base assigning the select list elements i am getting to the array of objects :

self.ListQuotationRFQ(result.IssuingBankQuotes);

i think i'm missing a big mistake with binding and i can't get to wrap my head around it.. let me know if anyone had this problem with foreach binding before please!

Answer 1

I don't feel I completely understand your query, correct me if im wrong.

You are having multiple fieldset and changing value in one is changing it in all. Assuming this is your query.

you defined value bind as

$parent.variable

This is the issue. For each occurrence, the value should be unique. I recommend you try defining json in your array.

self.ListRFQ = ko.observableArray([{
    "IdPricing": ko.observable(),
    "idFee": ko.observable()
        ....
}]);

and in value binding use:

data-bind=".... value: $data.IdPricing  ...."

$data refers to each row of your json array.