녹아웃을 사용하여 드롭 다운이있는 복잡한 테이블

Question

사용자가 이미있는 데이터베이스의 구성을 변경할 수있는 양식을 작성 중입니다.

데이터

예 :

ProcessorColumnName OutboundColumnName CatalogColumnId 
Active    Active    2 
Category   Category   3 
Inventory   Inventory   4 
Manufacturer  Manufacturer  5 
ManufacturerSKU  ManufacturerSKU  6 

녹아웃 모델 : 여기

function CatalogConfigurationModel(data) { 
     var self = this; 
     self.processorColumnName = ko.observable(data.ProcessorColumnName); 
     self.outboundColumnName = ko.observable(data.OutboundColumnName); 
     self.catalogColumnId = ko.observable(data.CatalogColumnId); 
     self.currentlyConfigured = ko.observable(data.OutboundColumnName); 
    } 

processorColumnName 및 키 값 쌍 역할을 currentlyConfigured.

테이블 :

<table class="table table-bordered table-striped"> 
        <tbody data-bind="foreach: catalogConfiguration"> 
         <tr class="h4"> 
          <td data-bind="text: processorColumnName"></td> 
          <td><select data-bind="options: $root.catalogConfiguration, 
          optionsText: 'outboundColumnName', 
          optionValue: 'catalogColumnId', 
          value: currentlyConfigured"></select></td> 
         </tr> 
        </tbody> 
       </table> 

이것이 수행하려고하면 해당 컬럼에 대한 새 값을 선택 드롭 다운을 processorColumns의 목록을 구축하고 제공합니다. 현재 기본 값으로 설정되어있는 값을 갖고 싶지만 드롭 다운 내에서 외부 foreach 값을 참조하는 방법을 모르겠습니다. 사용자가 처음 페이지를로드하면 OutboundColumnName 열이 드롭 다운의 기본값이되어야합니다.

저는 바이올린을 던지기 위해 일부 데이터를 모의하려고합니다.

피들링을 사용하는 데 문제가 있습니다. 콜백을 사용하고 있기 때문에 반환되는 스팅을 사용하고 싶습니다. 여기 링크가 있습니다.하지만 변수를 내 모델에 매핑하기 위해 위로 가져올 수 없습니다. , 내 프로그램에서 작동합니다. http://jsfiddle.net/LkqTU/15888/

Answer 1

이 문제 ...

1.You는 선택의 오타 바인딩 것있다. optionValue가 아닌 optionsValue 여야합니다.

2. 값 바인딩에 사용되는 관찰 가능 변수는 "optionsValue"필드에 저장된 값과 동일한 백킹 값을 가져야합니다. 귀하의 경우에는

바이올린을위한

self.catalogColumnId = ko.observable(data.CatalogColumnId); 
self.currentlyConfigured = ko.observable(data.CatalogColumnId);