在for循环中根据鉴别器字段加载不同的模板

Question

我正在尝试在 jsrender 模板的 for 循环中加载不同的模板。

我尝试了不同的语法但没有成功。我尝试在 {{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"
}

有争议的代码中index.html中的"stepTemplate"中的for循环。如果我从“:mytype”中删除“:”，那么它只会在浏览器中打印表达式。

Answer 1

问题在于

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

这将使用 ~loadTemplate(mytype) 返回的模板，并使用该模板迭代字段。您想要遍历字段，并根据字段对象上的 mytype 值对每个字段使用不同的模板。

你可以这样做：

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

在for循环中根据鉴别器字段加载不同的模板

Loading different templates based on discriminator field in for loop

jsrender