如何根据 属性 选择要呈现的模板
How to choose which template to render based on a property
我正在尝试从旧的 jQuery tmpl 升级到这个很棒的新 jsRender。
我的代码已经可以运行了。
我正在构建一个基于 JSON return 后端编辑的模板的表单。
对象是:
var form = {
name: "addNew",
fields: [{type: "text", name: "Age"}, {type: "hidden", name: "Id"}]
};
在旧的 jQuery 插件中我是这样做的
'{{tmpl(this.data) selectInputTemplate( this.data )}}'
函数 selectInputTemplate() 将 return 基于字段类型的模板名称。
这在新的 jsRender 中如何工作?
编辑:
如何访问整个对象?在旧的 jQuery 中,模板是 this.data.
我创建了一个辅助函数来 return 我的模板,但我需要知道如何访问整个对象以将其发送给辅助函数。
编辑 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}}"
我正在尝试从旧的 jQuery tmpl 升级到这个很棒的新 jsRender。
我的代码已经可以运行了。
我正在构建一个基于 JSON return 后端编辑的模板的表单。
对象是:
var form = {
name: "addNew",
fields: [{type: "text", name: "Age"}, {type: "hidden", name: "Id"}]
};
在旧的 jQuery 插件中我是这样做的
'{{tmpl(this.data) selectInputTemplate( this.data )}}'
函数 selectInputTemplate() 将 return 基于字段类型的模板名称。
这在新的 jsRender 中如何工作?
编辑:
如何访问整个对象?在旧的 jQuery 中,模板是 this.data.
我创建了一个辅助函数来 return 我的模板,但我需要知道如何访问整个对象以将其发送给辅助函数。
编辑 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}}"