0

我在读取 json 对象以构建表单时遇到问题。当我阅读表单字段类型时，我会通过一个关于如何使用引导程序构建字段的 switch 语句。在某些情况下，我想调用像 datepicker 这样的二级库。

for(var i=0, l=$custFormFields.length; i<l; i++) {
        $formLabel = $custFormFields[i].label;
        var $inputFieldType = '';
        var $inputEndTag = '';
        var $inputTagType = 'input';
        var $inputRequired = '';
        var $inputFieldWidth = '';
        var $inputFieldRows ='';
        var $inputMaxChar = '';
        var $inputdefaultValue ='';
        var $inputEnableSpellCheck ='';
        var $inputHidden ='';
        var $inputCanUploadAsset ='';
        var $textAreaDefaultVal = '';

        if ($custFormFields[i].required == "true") {
            $inputRequired = "required";
        } else {}        
switch ($custFormFields[i].fieldType){


                    case "dropdown":
                        fieldRendered = false;
                        var $optionLines ="";
                        $inputTagType = 'select';
                        $inputEndTag = "</select>";
                        for(var o=0, l=$custFormFields[i].tagOption.length; o<l; o++) {
                            var $optionInfo = $custFormFields[i].tagOption[o];
                            var $optionLines = $optionLines + '<option value="' + $optionInfo.value + '">' + $optionInfo.name + '</option>';
                        }

                        $formInput = '<' + $inputTagType + ' class="floatL" id="'+ $custFormFields[i].tagCode + '" name="'+ $custFormFields[i].tagCode + '" ' + $inputRequired + ' onchange="dropdownListener(' + $custFormFields[i].tagCode + ')" >' + $optionLines + $inputEndTag + '<label id="' + $custFormFields[i].tagCode + '_value"  class="control-label" />';
                        fieldRendered = true;
                    break
                    case "dropdown-editable":
                        fieldRendered = false;
                        var $optionLines ="";
                        $inputTagType = 'select';
                        $inputEndTag = "</select>";
                        for(var o=0, l=$custFormFields[i].tagOption.length; o<l; o++) {
                            var $optionInfo = $custFormFields[i].tagOption[o];
                            var $optionLines = $optionLines + '<option value="' + $optionInfo.value + '">' + $optionInfo.name + '</option>';
                        }

                        $formInput = '<' + $inputTagType + ' id="'+ $custFormFields[i].tagCode + '" name="'+ $custFormFields[i].tagCode + '" ' + $inputRequired + ' onchange="dropdownEditListener(' + $custFormFields[i].tagCode + ')" >' + $optionLines + $inputEndTag + '<input id="' + $custFormFields[i].tagCode + '" class="input-xlarge" type="text">'
                        fieldRendered = true;
                    break;
                    case "datePicker":
                        fieldRendered = false;
                        if (typeof Datepicker === 'undefined'){
                            require(['scripts/bootstrap-datepicker.js'], function(data){
                                $formInput = '<div id="' + $custFormFields[i].tagCode + '_range" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc"><i class="icon-calendar icon-large"></i><span></span> <b class="caret" style="margin-top: 8px"></b>   </div><input type="hidden" id="'+ $custFormFields[i].tagCode + '" value="'+ $custFormFields[i].defaultValue + '"/>';

                            });
                            break;
                            fieldRendered = true;
                        }else {
                            $formInput = '<div id="' + $custFormFields[i].tagCode + '_range" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc"><i class="icon-calendar icon-large"></i><span></span> <b class="caret" style="margin-top: 8px"></b>   </div><input type="hidden" id="'+ $custFormFields[i].tagCode + '" value="'+ $custFormFields[i].defaultValue + '"/>';
                            break;
                            fieldRendered = true;
                        }
    var fri=0;
            while(fieldRendered == false){
               setTimeout(function() {}, 100);
               fri++
            }
            $formHTML = $formHTML + '<div class="control-group"><label class="control-label">' + $formLabel + '</label><div class="controls">' + $formInput + '</div></div>\n\r';
        }
        return $formHTML;

我遇到的问题是，一旦我进行了 require 调用，switch 语句就会继续并使用以前的传递信息跳过该字段。

我什至在布尔值中添加了一个案例的开始设置为 false 并在完成后设置为 true。然后做一个while循环，一旦布尔值为真，该循环就应该结束。但是 require 调用并没有拉入脚本，我陷入了无限循环。有什么建议么？

4

1 回答 1

0

这可能与在 break 语句之后设置标志的事实有关吗？

require(['scripts/bootstrap-datepicker.js'], function (data) {
    $formInput = '(snip)';
});
break;
fieldRendered = true; // <- dead code

一般来说，其他一些部分对我来说看起来有点狡猾，例如看起来你正试图做一个忙碌的旋转来等待这里的东西：

while(fieldRendered == false){
    setTimeout(function() {}, 100);
    fri++
}

由于 JavaScript 的异步特性，它的行为并不像您期望的那样；setTimeout安排从现在开始 100 毫秒执行一个空函数并立即进入下一个循环迭代，它不会等待 100 毫秒才能进入while循环的下一个滴答声。

的回调require也不会像您期望的那样执行；它只会在bootstrap-datepicker.js下载和初始化后运行一次，这可能在整个函数返回后很久$formHTML。

于 2013-06-07T17:42:40.307 回答