자식 개체의 속성에 텍스트 바인딩

Question

knockout.js를 사용하면 서버에서 JSON 개체의 자식 개체 속성에 바인딩 할 수 있습니까? 특히,이처럼 보이는 서버에서 개체가 주어진 경우 :

var viewModel = ko.mapping.fromJS(obj); 

내가 list 바인딩 :

var obj = { 
    list: [ { key: "a", value: 1 }, 
      { key: "b", value: 2 }, 
      { key: "c", value: 3 }   
     ], 
    selected: { 
     key: "", 
     value: null 
    } 
}; 

나는 "매핑"플러그인을 통해이 자바 스크립트 객체에서 뷰 모델을 만듭니다 그래서 같은 <select> 태그 :

<select data-bind="options: list, optionsText: 'key', 
        optionsValue: 'value', 
        value: selected"> 
</select> 

내 뷰 모델의 selected 재산에 값을 할당했습니다. 즉, 옵션을 선택하면 코드에서 viewModel.selected.key() 및 viewModel.selected.value()을 성공적으로 쿼리하여 최신 값을 얻을 수 있습니다.

그러나 선택한 항목의 key 또는 value 데이터를 스팬에 바인딩 할 수 없습니다. 예를 들어 선택한 값이 표시되지 않습니다.

<span data-bind="text: selected.value"></span> 

내가 원하는 것을 할 수 있습니까? 적절한 컨텍스트를 설정하기 위해 실제 간단한 템플릿을 사용해야합니다 (예 : selected)?

나는 here의 예가있다. 나는 특별히 자식 selected 객체를 관찰 가능 객체로 매핑하려고 시도했지만 행운은 없습니다 (추가 옵션과 함께 매핑 된 호출을 주석 처리했습니다 참조).

Answer 1

매핑 옵션을 올바르게 사용하고 계셨습니다. selected을 관찰 가능으로 지정하여 드롭 다운에서 변경하면 UI가 업데이트됩니다. 귀하의 경우에는 심지어 비어있을 수도 있습니다.

selected: { key="", value=null } 

그것은 key 및 value 관찰 가능한, 그러나 selected를 만들 것입니다 :주의해야 할

것은 같은 물체로 매핑 플러그인 거래 할 때이다.

다른 문제는 첫 번째 선택에 optionsValue: 'value'이 지정되어 있다는 것입니다. 이로 인해 개체의 value 속성이 개체 대신 selected에 기록됩니다.

개체 자체를 쓰려면 optionsValue 바인딩을 완전히 제거해야합니다.

다음은 이러한 업데이트로 바이올린입니다 : http://jsfiddle.net/rniemeyer/Dubu9/2/