[英]Conditional partials in Handlebars
I have the following data that I am trying to feed into a Handlebar template 我有以下数据,我试图提供给Handlebar模板
{
"set-group": [
{
"label": "Source Data",
"type": "select",
"options": [
{
"value": "Default Selections"
},
{
"value": "Other Selections"
}
]
},
{
"label": "Scale",
"type": "radio",
"options": [
{
"value": "log",
"label": "Log",
"groupname": "group2"
},
{
"value": "linear",
"label": "Linear",
"groupname": "group2"
}
]
}
]
}
I created and registered 2 Partials, one that templates "selects" form elements and one that templates "radio" inputs. 我创建并注册了2个Partials,一个模板“选择”表单元素,另一个模板“无线电”输入。 I cannot know what type of form element will be in the data so I need some sort of helper that checks if type == select and applies the appropriate partial for the select.
我不知道数据中将包含什么类型的表单元素,因此我需要某种帮助程序来检查type == select并为select选择适当的部分。 I am having trouble with creating such a helper.
我在创建这样的帮助器时遇到了麻烦。
I was thinking of replacing type=select in the data to just select=true and just check for true/false using the if/else helper but I would rather keep the format standardized 我在考虑将数据中的type = select替换为select = true,并使用if / else帮助程序检查true / false但我宁愿保持格式标准化
Any ideas? 有任何想法吗?
I ended up using this helper 我最终使用了这个助手
// Comparison Helper for handlebars.js
// Pass in two values that you want and specify what the operator should be
// e.g. {{#compare val1 val2 operator="=="}}{{/compare}}
Handlebars.registerHelper('compare', function(lvalue, rvalue, options) {
if (arguments.length < 3)
throw new Error("Handlerbars Helper 'compare' needs 2 parameters");
operator = options.hash.operator || "==";
var operators = {
'==': function(l,r) { return l == r; },
'===': function(l,r) { return l === r; },
'!=': function(l,r) { return l != r; },
'<': function(l,r) { return l < r; },
'>': function(l,r) { return l > r; },
'<=': function(l,r) { return l <= r; },
'>=': function(l,r) { return l >= r; },
'typeof': function(l,r) { return typeof l == r; }
}
if (!operators[operator])
throw new Error("Handlerbars Helper 'compare' doesn't know the operator "+operator);
var result = operators[operator](lvalue,rvalue);
if( result ) {
return options.fn(this);
} else {
return options.inverse(this);
}
});
Source: http://doginthehat.com.au/2012/02/comparison-block-helper-for-handlebars-templates/ 资料来源: http : //doginthehat.com.au/2012/02/comparison-block-helper-for-handlebars-templates/
I constructed something similar: 我构造了类似的东西:
// superclass for all form field views
App.FormFieldView = Ember.View.extend({
classNames: 'formFieldView',
field: null,
...
});
// form field with just text
App.FormFieldTextView = App.FormFieldView.extend({
templateName: 'formfield-text',
...
});
// form field with checkbox
App.FormFieldCheckboxView = App.FormFieldView.extend({
templateName: 'formfield-checkbox',
...
});
... and so on (have more types for date selector, select lists etc)
And then I have a field class that is used to specify the field. 然后我有一个用于指定字段的字段类。 The trick is the
typeXXX
fields that I use to define what to render. 技巧是我用来定义渲染内容的
typeXXX
字段。
// field definition in controller.
App.Field = Ember.Object.extend({
label: null,
required: true,
value: null,
typeText: function () { // defaults to typeText
return !(this.get('typeDate') || this.get('typeSelect')
|| this.get('typeCheckbox')
|| this.get('typeInfo'));
}.property('typeDate', 'typeSelect', 'typeCheckbox', 'typeInfo').cacheable()
});
Example: 例:
var fields = [
App.Field.create({ label: 'First name',
valueBinding: 'App.model.firstName'
}),
App.Field.create({ label: 'I have a valid work permit for working in India.',
valueBinding: 'App.model.validWorkingIndia',
typeCheckbox: true});
];
And finally my template view does a switch on this array: 最后我的模板视图切换了这个数组:
<fieldset>
<dl>
{{#each fields}}
{{#if typeText}}
{{view App.FormFieldTextView fieldBinding="this"}}
{{/if}}
{{#if typeCheckbox}}
{{view App.FormFieldCheckboxView fieldBinding="this"}}
{{/if}}
... more types here
{{/each}}
</dl>
</fieldset>
Handlebar templates for the form controls: 表单控件的Handlebar模板:
<script type="text/x-handlebars" data-template-name="formfield-text">
<dt><label>
{{field.label}}{{#if field.required}}*{{/if}}
</label></dt>
<dd>{{view Ember.TextField valueBinding="field.value"}}</dd>
</script>
<!-- dd/dt deliberately in the wrong order -->
<script type="text/x-handlebars" data-template-name="formfield-checkbox">
<dd class="checkbox">
{{view Ember.Checkbox valueBinding="field.value"}}
</dd>
<dt class="checkbox"><label>{{field.label}}{{#if field.required}}*{{/if}}
</label></dt>
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.