jsrender - 如何根据属性选择要渲染的模板
问题描述
我正在尝试从旧的 jQuery tmpl 升级到这个很棒的新 jsRender。
我的代码已经在工作了。
我正在使用基于后端返回的 JSON 的模板构建一个 FORM。
对象是:
var form = {
name: "addNew",
fields: [{type: "text", name: "Age"}, {type: "hidden", name: "Id"}]
};
在旧的 jQuery 插件中,我确实喜欢这样
'{{tmpl(this.data) selectInputTemplate( this.data )}}'
其中函数 selectInputTemplate() 将根据字段类型返回模板名称。
这将如何在新的 jsRender 中工作?
编辑:
如何访问整个对象?在旧的 jQuery 模板中使用this.data。
我创建了一个辅助函数来返回模板,但我需要知道如何访问整个对象以将其发送给辅助函数。
编辑2:
这很难看,但它正在工作:
var form_field_wrap =
"{{if type === 1 tmpl='form_field_input_text' /}}" +
"{{if type === 2 tmpl='form_field_input_select' /}}" +
"{{if type === 3 tmpl='form_field_input_checkbox' /}}" +
"{{if type === 4 tmpl='form_field_input_radios' /}}" +
"";
解决方案
在模板中,您可以使用#data
.
(见路径和表达式)
在辅助函数中,this
对象一般是当前view
对象,因此可以将数据对象作为this.data
.
这是一个显示上述两种方法的示例:
<script id="myTmpl" type="text/x-jsrender">
{{include tmpl=~getTmpl(#data)/}}
</script>
<div id="page"></div>
<script>
var myTmpl = $.templates("#myTmpl"),
data = { name: "Jo" },
helpers = {
getTmpl: function(data) {
return $.templates("{{: 123}}" + data.name + this.data.name);
}
},
html = myTmpl.render(data, helpers);
$("#page").html(html);
</script>
顺便说一句,您可以使用{{if}}
这样的标签编写示例
"{{if type === 1 tmpl='form_field_input_text'}}" +
"{{else type === 2 tmpl='form_field_input_select'}}" +
"{{else type === 3 tmpl='form_field_input_checkbox'}}" +
"{{else type === 4 tmpl='form_field_input_radios'}}" +
"{{/if}}"
推荐阅读
- css - justify-self 在 CSS4 中“不是已知的 CSS 属性”,但 justify-contents 不起作用
- python - 在一个类中用单个“if-else”替换多个“if-else”
- excel - VBA循环遍历行并返回值
- python - 为什么我们在这个装饰器中返回 None ?
- amazon-cognito - 合并 Cognito 中使用相同电子邮件(电子邮件和社交)创建的两个帐户
- file-io - 贝加莱PLC。写入后计算新偏移量或如何将数据写入新行
- javascript - UWP VAPID 备用频道 401
- nativescript - 如何在 nativeScript 应用程序上获取用户位置
- c# - 在 VS 2017 中使用“使用 xamarin.forms 创建移动应用程序”电子书
- windows - 通过 cmd 中的命令删除目录,但在 bat 文件中不使用相同的命令