2011-08-18 135 views
1

沒有約束力我有一個函數至極構建HTML控件動態使用jQuery和淘汰賽,但是複選和單選按鈕不起作用,沒有約束力複選和單選按鈕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讓我試試!!!,謝謝 –

+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