2017-10-30 5 views
1

녹아웃에서 동적으로 필드를 생성합니다. 아래 코드는 텍스트 상자 또는 드롭 다운 선택 목록을 만듭니다. 입력 필드는 "Response"속성에 바인딩되어 있으며이 속성도 내가 구독합니다. 사용자가 선택 목록을 변경하면 사용 된 컨트롤 유형 (예 : 텍스트 상자 또는 드롭 다운 목록)을 알고 싶습니다. 내 문제는 녹아웃은 나에게 잘못된 유형을 항상 말하고있다; 마지막으로 만든 필드 텍스트 상자, 다음은동적으로 구독 이벤트 만들기 - 녹아웃

$(document).ready(function() { 

    var fields = [{ 
    "Label": "Enter The State", 
    "Length": 75, 
    "Type": "DropDownList", 
    "IsRequired": true, 
    "PreValue": "New York, New Jersey", 
    "Response": "" 
    }, { 
    "Label": "Enter Reason", 
    "Length": 75, 
    "Type": "DropDownList", 
    "IsRequired": true, 
    "PreValue": "Good,Bad,Ugly", 
    "Response": "" 
    }, { 
    "Label": "Enter City", 
    "Length": 75, 
    "Type": "TextBox", 
    "IsRequired": true, 
    "PreValue": "", 
    "Response": "" 
    }]; 

/* knockout */ 
function DynamicFormViewModel() { 
    var self = this; 
    self.fields = fields; 
    self.selectItem = function(value, text) { 
     this.value = value; 
     this.text = text; 
    }; 
    for (var i = 0; i < self.fields.length; i++) { 
     var field = self.fields[i]; 
     if (field.Type == 'TextBox') { 
     field.Response = ko.observable(field.PreValue); 
     } else if (field.Type === 'DropDownList') { 
     field.Items = []; 
     var itms = field.PreValue.split(","); 
     field.Items.push(new self.selectItem('', '--' + field.Label + '--')); 
     for (var s = 0; s < itms.length; s++) { 
      var sItem = new self.selectItem(itms[s], itms[s]); 
      field.Items.push(sItem); 
     } 
     field.Response = ko.observable(field.PreValue); 
     } else { 
     field.Response = ko.observable(field.PreValue); 
     } 
     field.Response.subscribe(function(newValue) { 
     if (newValue !== undefined && newValue != null && newValue.length > 0) { 
     alert(field.Type); 
     } 
     }); 
    }; 
    }; 
    var viewModel = new DynamicFormViewModel(); 
    ko.applyBindings(viewModel); 

}); 

은 작업 예입니다 참조가 항상 마지막 그래서 jsFiddle

답변

2

응답 가입의 변수 "필드는"주변 루프에 의해 변경되고 항목을 루프에 넣습니다.

서브 스크립 션 기능을 "this"변수에 사용해야하는 컨텍스트로 전달하여 대신 사용할 수 있습니다.

field.Response.subscribe(function(newValue) { 
    if (newValue !== undefined && newValue != null && newValue.length > 0) { 
    alert(this.Type); 
    } 
}, field);