2011-08-18 2 views
1

바인딩 만 확인하고 라디오 버튼 내 코드를 확인하고 나에게 어떤 대답을 알려주세요 확인 및 라디오 버튼 내가 JQuery와 및 녹아웃 동적 기능 느릅 나무 빌드 HTML 컨트롤이 Knockoutjs

바인딩하지 작동하지 않습니다하지 .

function createControls(id, ctrl) { 
    var obj = $.parseJSON(ctrl.settings)['es']; 
    var validate = obj.validate; 
    switch (ctrl.type) { 
    case 'PlainText': 
     var PlainText = obj.caption + ": " + "<input data-bind='value: ctrid" + ctrlid + "' onChange='javascript:saveValue(" + id + ",this.value)' value='" + obj.value + "'><br>"; 
     BuildViewModel(obj); 
     return PlainText; 
     break; 

    case 'PasswordEdit': 
     var PasswordEdit = obj.caption + ": " + "<input type='password' data-bind='value: ctrid" + ctrlid + "' value='" + obj.value + "'><br>"; 
     BuildViewModel(obj); 
     return PasswordEdit; 
     break; 

    case 'SingleLineText': 
     var single = obj.caption + ": " + "<input data-bind='value: ctrid" + ctrlid + "' name='ctrid" + ctrlid + "' onChange='javascript:saveValue(" + id + ",this.value)' value='" + obj.value + "' required='" + validate.required + "' ><br>"; 
     validar(validate); 
     BuildViewModel(obj); 
     return single; 
     break; 

    case 'OptionMultiple': 
     var array_js = new Array(); 
     var i = 0; 
        var check = "<div align='left'><br>" +"<label>"+ obj.caption + ": " + "</label>"; 
        $.each(obj.items, function (k, v) { 
         check += "<input type='checkbox' value='" + v.value + "'  data-bind='checked: ctrlid" + ctrlid + "'>" + v.value; 
         array_js[i] = v.value; 
         i++ 
        }); 
        check += "</div>" 

     BuildViewModelCheck(obj, array_js); 
     return check; 
     break; 
    case 'SingleCombo': 
     var array_js = new Array(); 
     var i = 0; 
     var combo = "<div align='left'><br>" + "<label>" + obj.caption + ": " + "</label>"; 
     combo += "<select name='ctrid" +ctrlid + "' data-bind='options: ctrid" + ctrlid + ",value:select" + ctrlid + "'></select>"; 
     combo += "</div>"; 
     $.each(obj.items, function (k, v) { 
      array_js[i] = v.value; 
      i++ 

     }); 
     validar(validate); 
     BuildViewModelCombo(obj, array_js); 
     return combo; 
     break; 
    case 'Option': 
        var array_js = new Array(); 
        var i = 0; 
     var option = "<div align='left'><br>" + "<label>" + obj.caption + ": " + "</label>"; 
        $.each(obj.items, function (k, v) { 
         option += "<input type='radio' value='" + v.value + "' data-bind='checked: ctrlid" + ctrlid + "' name='ctrid" + ctrlid + "'/>" + v.value; 
         array_js[i] = v.value; 
         i++ 
        }); 

     option += "</div>" 
     validar(validate); 
     BuildViewModelRadio(array_js); 
     return option; 
     break; 
    } 

} 


function BuildViewModel(obj) { 
    var iden = "ctrid" + ctrlid; 
    viweModel[iden] = ko.observable(obj.value); 
} 

function BuildViewModelCheck(obj,array) { 
    var iden = "ctrid" + ctrlid; 
    viweModel[iden] = ko.observable(true); 
    //ko.observableArray(["Esposa", "Hijos"]); 
} 

function BuildViewModelRadio(aray) { 
    var iden = "ctrid" + ctrlid; 
    viweModel[iden] = ko.observable(aray); 
} 

function BuildViewModelCombo(obj, array) { 
    var iden = "ctrid" + ctrlid; 
    var select= "select" + ctrlid; 
    viweModel[iden] = array; 
    viweModel[select] = ko.observable(); 
} 
+2

때 당신은 ko.applyBindings 부릅니까? 이 컨트롤이 그 시점 이후에 생성되면 추가 된 후에'ko.applyBindings (data, yourNewElementWithBindings)'를 호출해야합니다. 자동으로 처리되기 때문에 템플릿 사용을 고려하는 것처럼 보입니다. –

+0

ummm 내게 노력합시다!, thanks –

+0

죄송합니다, Sean, ko.applyBindings를 호출하면 html 파일에 있습니다. –

답변

0
var arrInput = new Array(0); 
var rule = {}; 
var messages = {}; 
var validator = null; 
viweModel = {}; 





function addControls(ctrl) { 
    arrInput = new Array(0); 
    arrInput.push(arrInput.length); 
    display(ctrl); 
} 

function display(ctrl) { 
     for (intI = 0; intI < arrInput.length; intI++) { 
     document.getElementById('parah').innerHTML += createControls(arrInput[intI], ctrl); 
    } 
} 


function createControls(id, ctrl) { 
    var obj = ctrl.settings.es 
    var validate = obj.validate; 
    console.log(obj.validate); 

switch (ctrl.type) { 
    case 'Heading': 
     return "<div align='left'><br><h3>" + obj.caption + "</h3></br></div>"; 
     break; 
    case 'PlainText': 
     var PlainText = obj.caption + ": " + "<input data-bind='value:" + ctrl.name + "' value='" + obj.value + "'><br>"; 
     BuildViewModel(obj, ctrl); 
     return PlainText; 
     break; 
    case 'PasswordEdit': 
     var PasswordEdit = obj.caption + ": " + "<input type='password' data-bind='value:" + ctrl.name + "' value='" + obj.value + "'><br>"; 
     BuildViewModel(obj, ctrl); 
     return PasswordEdit; 
     break; 
    case 'SingleLineText': 
     var single = obj.caption + ": " + "<input data-bind='value:" + ctrl.name + "' name='" + ctrl.name + "' value='" + obj.value + "' required='" + validate.required + "' ><br>"; 
     validar(validate, ctrl); 
     BuildViewModel(obj, ctrl); 
     return single; 
     break; 
    case 'MultiLineText': 
     var multi = obj.caption + ": " + "<textarea data-bind='value: " + ctrl.name + "' name='" + ctrl.name + "' value='" + obj.value + "' required='" + validate.required + "'></textarea>"; 
     validar(validate, ctrl); 
     BuildViewModel(obj, ctrl); 
     return multi; 
     break; 
    case 'OptionMultiple': 
     var array_js = new Array(); 
     var i = 0; 
        var check = "<div align='left'><br>" +"<label>"+ obj.caption + ": " + "</label>"; 
        $.each(obj.items, function (k, v) { 
         check += "<input type='checkbox' value='" + v.value + "' data-bind='checked: " + ctrl.name + "'/>" + v.value; 
         array_js[i] = v.value; 
         i++ 
        }); 
        check += "</div>" 
        BuildViewModelCheck(obj, array_js, ctrl); 
     return check; 
     break; 
    case 'SingleCombo': 
     var array_js = new Array(); 
     var i = 0; 
     var combo = "<div align='left'><br>" + "<label>" + obj.caption + ": " + "</label>"; 
     combo += "<select name='" + ctrl.name + "' data-bind='options: " + ctrl.name + ",value:select" + ctrl.name + "'></select>"; 
     combo += "</div>"; 
     $.each(obj.items, function (k, v) { 
      array_js[i] = v.value; 
      i++ 

     }); 
     validar(validate, ctrl); 
     BuildViewModelCombo(obj, array_js, ctrl); 
     return combo; 
     break; 
    case 'Option': 
        var array_js = new Array(); 
        var i = 0; 
     var option = "<div align='left'><br>" + "<label>" + obj.caption + ": " + "</label>"; 
        $.each(obj.items, function (k, v) { 
         option += "<input type='radio' value='" + v.value + "' data-bind='checked: " + ctrl.name + "' name='" + ctrl.name + "'/>" + v.value; 
         array_js[i] = v.value; 
         i++ 
        }); 

     option += "</div>" 
     validar(validate, ctrl); 
     BuildViewModelRadio(array_js, ctrl); 
     return option; 
     break; 
} 

}

function validar(validate, ctrl) { 
    if (validate.required) { 
     messages[ctrl.name] = { required: validate.message1, 
         regex: validate.message2 
     }; 
        rule[ctrl.name] = { required: true, 
        regex: validate.regex 
       }; 
    } 

    validator = new jQueryValidatorWrapper("FormToValidate",rule, messages); 
} 


function BuildViewModel(obj, ctrl) { 

    viweModel[ctrl.name] = ko.observable(obj.value); 

} 

function BuildViewModelCheck(obj, array, ctrl) { 

    viweModel[ctrl.name] = ko.observableArray([]); 

} 

function BuildViewModelRadio(aray, ctrl) { 


    viweModel[ctrl.name] = ko.observable(""); 
} 


function BuildViewModelCombo(obj, array, ctrl) { 


    var select = "select" + ctrl.name; 
    viweModel[ctrl.name] = array; 
    viweModel[select] = ko.observable(); 
} 
+0

코드를 수정하여 동적으로 생성 된 각 컨트롤에 강력한 ID 추가 –

+0

이 답변을 찾을 수있는 다른 사람들을 위해 수행중인 작업을 설명하기 위해이 부분에 몇 가지 설명을 추가 할 수 있습니까? – Flexo