Загрузка различных шаблонов на основе поля дискриминатора в цикле for - PullRequest
Новая
       26

Загрузка различных шаблонов на основе поля дискриминатора в цикле for

0 голосов
/ 18 октября 2019

Я пытаюсь загрузить разные шаблоны в цикле for в шаблоне jsrender.

Я пробовал другой синтаксис, но безуспешно. Я попытался загрузить шаблон внутри {{for fields tmpl = "helperMethod ()"}} и включить в цикл также. Но пока безуспешно. 

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/1.0.5/jsrender.js"></script>
<script type="text/javascript" src="form.js"></script>
<title>Insert title here</title>
</head>
<body>
   <div id="formbody">      
   </div>
   <form name="submit()">
   <input name = "nitin" value="" placeholder="Put name">
   <input name = "password" value="" placeholder="Put password" type='password'>
   </form>

</body>
</html>

<script id="formTemplate" type="text/x-jsrender">
<form id={{:id}}>
    {{for steps tmpl="#stepTemplate"}}
    {{/for}}
</form>
</script>

<script id="stepTemplate" type="text/x-jsrender">
<div id={{:id}} data-order={{:order}}>
    <span><h2>{{:title}}</h2></span>
    <div id="dynamic-field-div">
        {{for fields tmpl="#"+~loadTemplate(:mytype)/}}
    </div>
</div>
</script>

<script id="field-input-template" type="text/x-jsrender">
<span>{{:type}}</span>
<span>{{:templateOptions.label}}</span>
<input name = {{:key}} id={{:id}} field-order={{:#index}} {{if templateOptions.hint != null && templateOptions.hint != "" }} placeHolder={{:templateOptions.hint}} {{/if}}>
</script>

<script id="field-password-template" type="text/x-jsrender">
<span>{{:label}}</span>
<input name = {{:key}} id={{:id}} field-order={{:#index}} type="password">
</script>

$(document).ready(function(){
    var formDescription = {
              "id":"loginForm",
              "steps": [
                    {
                      "id": "step_0",
                      "order": 0,
                      "title": "Personal Details",
                      "fields": [
                        {
                          "key": "firstName",
                          "templateOptions": {
                            "label": "First Name",
                            "hint": "enter first name"
                          },
                          "mytype":"input"
                        },
                        {
                          "key": "lastName",
                          "templateOptions": {
                            "label": "Last Name"

                          },
                          "mytype":"password"
                        }
                      ]
                    },
                    {
                      "id": "step_1",
                      "order": 1,
                      "title": "Business Details",
                      "fields": [
                        {
                          "key": "email",
                          "templateOptions": {
                            "label": "First Name",
                            "hint": "input first name"
                          },
                          "mytype":"input"
                        },
                        {
                          "key": "mobile",
                          "templateOptions": {
                            "label": "Last Name",
                            "hint": "input last name"
                          },
                          "mytype":"password"
                        }
                      ]
                    }
                  ]
                };


    var templateObjects = $.templates({
          stepTmpl: "#stepTemplate",
          formTmpl: "#formTemplate"
        });

    function loadTemplateFromType(type) {
        console.log(type);
        return "field-"+type+"-template";
    }
    var myHelpers = {"loadTemplate": loadTemplateFromType};
    $.views.helpers(myHelpers);


    function appendToDom() {
        $('#formbody').append(generateFormHTML());
    }

    function generateFormHTML() {
        console.log("in generate");
        var formHtml = $.render.formTmpl(formDescription);
        return formHtml;
    }

    appendToDom();

});

Это сообщение об ошибке, которое я вижу на консоли. 

message
:
"Syntax error↵Compiled template code:↵↵// stepTmpl↵var v,t=j._tag,ret=""↵+"\n<div id=";↵try{↵ret+=((v=data.id)!=null?v:"");↵}catch(e){ret+=j._err(e,view,undefined);}ret=ret↵+" data-order=";↵try{↵ret+=((v=data.order)!=null?v:"");↵}catch(e){ret+=j._err(e,view,undefined);}ret=ret↵+">\n <span><h2>";↵try{↵ret+=((v=data.title)!=null?v:"");↵}catch(e){ret+=j._err(e,view,undefined);}ret=ret↵+"</h2></span>\n    <div id=\"dynamic-field-div\">\n       ";↵try{↵ret+=t("for",view,this,[↵{view:view,content:false,tmpl:false,↵  params:{args:['fields'],↵   props:{'tmpl':'\"#\"+~loadTemplate(:mytype)'}},↵    args:[data.fields],↵    props:{'tmpl':"#"+view.ctxPrm("loadTemplate")(:data.mytype)}}]);↵}catch(e){ret+=j._err(e,view,undefined);}ret=ret↵+"\n    </div>\n</div>\n";↵return ret;↵: "Unexpected token :""
name:"JsRender Error"
}

Цикл for в "stepTemplate" в индексе.html в спорном коде. Если я удаляю «:» из «: mytype», он просто печатает выражение в браузере.

1 Ответ

0 голосов
/ 18 октября 2019

Проблема в 

{{for fields tmpl="#"+~loadTemplate(mytype)/}}

, который будет использовать шаблон, возвращаемый ~loadTemplate(mytype), и перебирать поля, используя этот шаблон. Вы хотите перебрать поля и использовать разные шаблоны для каждого поля на основе значения mytype для объекта поля.

Вы можете сделать это так: 

{{for fields}}{{include tmpl="#"+~loadTemplate(mytype)/}}{{/for}}
...