녹아웃 : 선택 요소의 옵션을 사용하여 데이터 개체 바인딩

Question

Phonegap (리플 에뮬레이터에서 실행)과 함께 데이터 바인딩에 KO MVVM을 사용하고 있지만 문제가 있습니다.

select 요소에 선택한 값의 객체를 바인딩하려고합니다.

내 코드입니다 : 내가 선택 목록에서 AB - Alberta을 선택하면

HTML

<select data-bind="options: pro(), 
        optionsText: 'value', 
        optionsValue: this, 
        value: province"> 
</select> 

JS는

function screen1ViewModel() 
{ 
    var self = this; 
    self.pro = ko.observableArray(); 
    self.province = ko.observable(); 
} 

$(document).ready(function() { 
    var vm = new screen1ViewModel(); 

    var pro = [{ 
     "symbol": "AB", 
     "value": "AB - Alberta" 
    }, 
    { 
     "symbol": "BC", 
     "value": "BC - British Columbia" 
    }]; 

$.each(pro, function(index, item) { 
       vm.pro().push(item); 
      }); 
}); 

console.log(vm.province().symbol); 
console.log(vm.province().value); 

예를 들어, 나는 너무 다른 키입니다 필요합니다.

도움이 될 것입니다.

Answer 1

당신은 단지

때문에 optionsValue: this, (이상하게도 있지만이 최대 Demo KO 3.0에서 작업한다)를 제거 할 필요가

기본 동작은 Knockout이 전체 객체를로 사용한다는 것입니다.3210 당신이 필요로 정확히 인 지정 더 optionsValue 옵션이없는 경우 :

<select data-bind="options: pro, optionsText: 'value', value: province"></select> 

데모 JSFiddle합니다.

Answer 2

귀하의 뷰 모델이 방해 받고있는 것 같습니다. 여기

<select 
    data-bind=" 
     options: pro, 
     optionsText: 'value', 
     optionsValue: 'symbol', 
     optionsText: 'value' 
     value: province 
"> 
</select> 

뷰 모델

function screen1ViewModel() 
{ 
    var self = this; 
    self.pro = ko.observableArray(); 
    self.province = ko.observable(); 

    self.GetValue = function(){ 
     console.log(self.province()) 
    } 
} 

$(document).ready(function() { 
    var vm = new screen1ViewModel(); 


    var pro = [{ 
     "symbol": "AB", 
     "value": "AB - Alberta" 
    }, 
    { 
     "symbol": "BC", 
     "value": "BC - British Columbia" 
    }]; 

    vm.pro(pro) 
    ko.applyBindings(vm) 
}); 

Demo

Documentation 도움이 될 것입니다 솔루션

보기입니다.

편집 :

수정 기능

self.GetValue = function(){ 
    var obj = {} 
    ko.utils.arrayForEach(self.pro(),function(item){ 
     if(item.symbol ==self.province()){ 
      obj = item 
     } 
    }) 
    console.log(obj) 
} 

Demo