在基于jsviews的应用程序中,我有一个数据对象,其中包含type属性(实际上是服务器类型)。
我想将其转换并附加后缀以传递给tmpl包含项。
让我说:
$.views.converters({
"serverSideTypeToLocalType": function(serverSideType) {
switch(serverSideType) {
case "server-side-type1":
return "type1";
case "server-side-type2":
return "type2";
case "server-side-type3":
return "type3";
default:
throw "Invalid type";
}
}
});
我也有模板:
<script type="text/x-jsrender" id"type1-edit">
template for editing type 1
</script>
<script type="text/x-jsrender" id"type1-view">
template for viewing type 1
</script><script type="text/x-jsrender" id"type2-edit">
template for editing type 2
</script>
<script type="text/x-jsrender" id"type2-view">
template for viewing type 2
</script><script type="text/x-jsrender" id"type3-edit">
template for editing type 3
</script>
<script type="text/x-jsrender" id"type3-view">
template for viewing type 3
</script>
我的数据对象是:
var data = { MyObjects : [
{
"ServerSideType": "server-side-type1",
"IsEditing" : true
},{
"ServerSideType": "server-side-type2",
"IsEditing" : false
}] };
如何构建基于ServerSideType
和IsEditing
属性动态包含正确模板的主模板?
我尝试过:
<div>
{^{for MyObjects}}
{^{include ^tmpl=({serverSideTypeToLocalType:ServerSideType}+ "-" + IsEditing ? "edit":"view")/}}
{{/for}}
</div>
但是失败,并出现一个奇怪的错误Cannot read property 'bd' of undefined
。
这是可繁殖的样品:
(function($) {
$(function() {
$.views.converters({
"serverSideTypeToLocalType": function(serverSideType) {
switch (serverSideType) {
case "server-side-type1":
return "type1";
case "server-side-type2":
return "type2";
case "server-side-type3":
return "type3";
default:
throw "Invalid type";
}
}
});
var data = {
MyObjects: [{
"ServerSideType": "server-side-type1",
"IsEditing": true
}, {
"ServerSideType": "server-side-type2",
"IsEditing": false
}]
};
var tmpl = $.templates("#main");
tmpl.link("#container", data);
});
})(jQuery);
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jsviews.min.js"></script>
<script type="text/x-jsrender" id="main">
<div>
{^{for MyObjects}}
<p>Object n° {^{:#index +1}}</p>
{^{include ^tmpl=({serverSideTypeToLocalType:ServerSideType}+ "-" + IsEditing ? "edit":"view")/}}
{{/for}}
</div>
</script>
<script type="text/x-jsrender" id="type1-edit">
<div>
template for editing type 1
</div>
</script>
<script type="text/x-jsrender" id="type1-view">
<div>
template for viewing type 1
</div>
</script>
<script type="text/x-jsrender" id="type2-edit">
<div>
template for editing type 2
</div>
</script>
<script type="text/x-jsrender" id="type2-view">
<div>
template for viewing type 2
</div>
</script>
<script type="text/x-jsrender" id="type3-edit">
<div>
template for editing type 3
</div>
</script>
<script type="text/x-jsrender" id="type3-view">
<div>
template for viewing type 3
</div>
</script>
<div id="container">Loading ...</div>
答案 0 :(得分:1)
您不能在{:...}
标签的标记中嵌套{{...}}
标签。
我建议使用帮助器,而不是转换器:
{^{include ^tmpl="#" + ~serverToLocal(ServerSideType) + "-" + (IsEditing ? "edit":"view")/}}
您还可以使用数据链接元素:
<span data-link='{include ^tmpl="#" + ~serverToLocal(ServerSideType)+ "-" + (IsEditing ? "edit" : "view")}'></span>
(function($) {
$(function() {
function serverToLocal(serverSideType) {
switch (serverSideType) {
case "server-side-type1":
return "type1";
case "server-side-type2":
return "type2";
case "server-side-type3":
return "type3";
default:
throw "Invalid type";
}
}
var data = {
MyObjects: [{
"ServerSideType": "server-side-type1",
"IsEditing": true
}, {
"ServerSideType": "server-side-type2",
"IsEditing": false
}]
};
var tmpl = $.templates("#main");
tmpl.link("#container", data, {serverToLocal: serverToLocal});
});
})(jQuery);
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jsviews.min.js"></script>
<script type="text/x-jsrender" id="main">
<div>
{^{for MyObjects}}
<p>Object n° {^{:#index +1}}</p>
<input data-link="ServerSideType" />
<input data-link="IsEditing" type="checkbox"/>
{^{include ^tmpl="#" + ~serverToLocal(ServerSideType) + "-" + (IsEditing ? "edit":"view")/}}
{{/for}}
</div>
Two:
<div>
{^{for MyObjects}}
<p>Object n° {^{:#index +1}}</p>
<span data-link='{include ^tmpl="#" + ~serverToLocal(ServerSideType)+ "-" + (IsEditing ? "edit" : "view")}'></span>
{{/for}}
</div>
</script>
<script type="text/x-jsrender" id="type1-edit">
<div>
template for editing type 1
</div>
</script>
<script type="text/x-jsrender" id="type1-view">
<div>
template for viewing type 1
</div>
</script>
<script type="text/x-jsrender" id="type2-edit">
<div>
template for editing type 2
</div>
</script>
<script type="text/x-jsrender" id="type2-view">
<div>
template for viewing type 2
</div>
</script>
<script type="text/x-jsrender" id="type3-edit">
<div>
template for editing type 3
</div>
</script>
<script type="text/x-jsrender" id="type3-view">
<div>
template for viewing type 3
</div>
</script>
<div id="container">Loading ...</div>