Question

WORKING DEMO

I’m facing the following problem:
I have an json array:

self.customExportFileArray = ko.observableArray([
      {
        "IncludeInExportConversionTypesSelectList" :
          [
            {
              "ConversionGroupID" : 1,
              "Title" : "Quote Start - Auto"
            },
            {
              "ConversionGroupID" : 2,
              "Title" : "Quote Finish - Auto"
            },
            {
              "ConversionGroupID" : 5,
              "Title" : "Sales Data"
            }
          ],
        "ChooseFromConversionTypesSelectList" : [],
        "FileName" : "Template1",
        "FileFormat" : "Excel",
        "FilterSettings" : true,
        "ComparisonMetrics" : false
      },
      {
        "IncludeInExportConversionTypesSelectList":
          [
            {
              "ConversionGroupID" : 1,
              "Title" : "Quote Start - Auto"
            },
            {
              "ConversionGroupID" : 5,
              "Title" : "Sales Data"
            }
          ],
        "ChooseFromConversionTypesSelectList":
          [
            {
              "ConversionGroupID" : 2,
              "Title" : "Quote Finish - Auto"
            }
          ],
        "FileName" : "Template2",
        "FileFormat" : "CSV",
        "FilterSettings" : false,
        "ComparisonMetrics" : true
      }
    ]);
}

And I have some HTML Code which contains one dropdown, text box, few radio-buttons and Two List controls. So, the point is: Dropdown should contain as many Items as customExportFileArray array’s length, and Item name (optionsText) should be FileName property from array. (Looks like it work now). Next, If change the Item from dropdown, let’s say Template1 File Name textbox should be filled by FileName property from array (Template1), Excel radiobutton should be checked, Keep filter settings should be checked, Compatison Metrics should be unchecked and ‘Conversion Types to Choose From’ should contain a list of IncludeInExportConversionTypesSelectList array (Text = Title)


But if to see in my HTML Code I’m doing something wrong, but don’t know what exactly. It doesn’t load specific data by changing Item from dropdown, but I thought that I’m doing all in a right way.
Additional question: How to save changes for specific Item array (I mean, for example you changed the name, or changed checked radiobutton).

Any help would be highly appreciated.

Thanks in advance.

WORKING DEMO

Answer 1

You need to be binding the value of the drop down to an observable property called something like ‘SelectedTemplate’ to store the selected value, then binding the changeable fields to the selected object:

<select data-bind="options: customExportFileArray, optionsText: function(item) { return item.FileName }, value: selectedTemplate">

<input type="text" data-bind="value: selectedTemplate().FileName"/>

self.selectedTemplate = ko.observable();
self.customExportFileArray = ko.observableArray([
      {
       ....

I have modified your jsfiddle as follows: http://jsfiddle.net/ptmwr/11/

As you can see, the values binding of the drop down now points at this new property, and I had to change the way the optionstext binds to work with the object as a value.

EDIT:

Also you are trying to bind a boolean to RadioButton’s checked property, which they are not really designed for. If you want to bind to a boolean property then you should use checkbox control instead as this is either on or off.

Hope this helps!