我正在尝试在 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" 中删除 ":"，那么它只会在浏览器中打印表达式。
问题在于
{{for fields tmpl="#"+~loadTemplate(mytype)/}}
它将使用由 返回的模板~loadTemplate(mytype)，并使用该模板迭代字段。您想要遍历字段，并根据mytype字段对象上的值为每个字段使用不同的模板。
你可以这样做：
{{for fields}}{{include tmpl="#"+~loadTemplate(mytype)/}}{{/for}}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句