Question

I have a function which builds html controls dynamically with jQuery and Knockout, but check and radio buttons don’t work, they are not binding.

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();
}

Answer 1

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();
}