问题描述
我试图在我的Meteor应用中重复使用一些控制元素。我希望以下两个模板切换可见性并提交不同的表单。 < template name ='addControl'> ;
< img class ='add'src ='/ images / icon-plus.png'/>
< / template>
< template name ='okCancelControl'>
< img class ='submit'src ='/ images / icon-submit.png'/>
< img class ='cancel'src ='/ images / icon-cancel.png'/>
< / template>
我会在另一个模板中调用这些模板:
< template name ='insectForm'>
{{#if editing}}
{{> okCancelControl}}
{{else}}
{{> addControl}}
{{/ if}}
< / template>
编辑
是 Session
布尔值。
连接控件以显示,隐藏和提交表单的好方法是? / strong>
主要问题是从控件模板中找到addInsect模板(数据所在的位置)提交事件火灾)。以下是我所做的:
首先,控制:
< ;模板名称='addControl'>
< section class ='controls'>
< span class =add icon-plus>< / span>
< / section>
< / template>
< template name ='okCancelControl'>
< section class ='controls'>
< span class =submit icon-publish>< / span>
< span class =cancel icon-cancel>< / span>
< / section>
< / template>
现在javascripts。他们只需点击时调用回调。
Template.addControl.events({
'click .add':function (event,template){
if(this.add!= null){
this.add(event,template);
}
}
});
Template.okCancelControl.events({
'click .cancel':function(event,template){
if(this.cancel!= null){
(事件,模板);
}
},
'点击.submit':函数(事件,模板){
if(this.submit!= null) {
this.submit(event,template);
}
}
});
然后我使用句柄' #with
块助手。
< template name ='addInsect'>
{{#with controlCallbacks}}
{{#if addingInsect}}
< section class ='form'>
{{> insectsErrors}}
< label for ='scientificName'>科学名称< input type ='text'id ='scientificName'/>< / label>
< label for ='commonName'>通用名称< input type ='text'id ='commonName'/>< / label>
{{> okCancelControl}}
< / section>
{{else}}
{{> addControl}}
{{if}}
{{/ with}}
< / template>
并创建与此表单相关的回调的相应javascript。
Session.set('addingInsect',false);
Template.addInsect.controlCallbacks = {
add:function(){
Session.set('addingInsect',true);
Session.set('addInsectErrors',null);
},
cancel:function(){
Session.set('addingInsect',false);
Session.set('addInsectErrors',null);
},
提交:function(){
var attrs,errors;
attrs = {
commonName:DomUtils.find(document,'input#commonName')。value,
scientificName:DomUtils.find(document,'input#scientificName')。value
};
errors = Insects.validate(attrs);
Session.set('addInsectErrors',errors);
if(errors == null){
Session.set('addingInsect',false);
Meteor.call('newInsect',attrs);
}
}
};
Template.addInsect.addingInsect = function(){
Session.get('addingInsect');
};
Template.addInsect.events = {
keyup #scientificName,keyup #commonName':function(event,template){
if(event.which === 13) {
this.submit();
}
}
};
在提交回调函数中,我必须使用 DomUtils.find
而不是 template.find
因为模板
是okCancelControl的一个实例,而不是addInsect。
I'm trying to reuse some control elements in my Meteor app. I'd like the following two templates to toggle visibility and submission of different forms.
<template name='addControl'>
<img class='add' src='/images/icon-plus.png' />
</template>
<template name='okCancelControl'>
<img class='submit' src='/images/icon-submit.png' />
<img class='cancel' src='/images/icon-cancel.png' />
</template>
I'll call these templates in another:
<template name='insectForm'>
{{#if editing}}
<!-- form elements -->
{{> okCancelControl}}
{{else}}
{{> addControl}}
{{/if}}
</template>
editing
is a Session
boolean.
What's a good way to wire up the controls to show, hide and "submit" the form?
The main problem is finding the addInsect template (where the data is) from the control templates (where the "submit" event fires). Here's what I did:
First, the controls:
<template name='addControl'>
<section class='controls'>
<span class="add icon-plus"></span>
</section>
</template>
<template name='okCancelControl'>
<section class='controls'>
<span class="submit icon-publish"></span>
<span class="cancel icon-cancel"></span>
</section>
</template>
Now the javascripts. They simply invoke a callback when clicked.
Template.addControl.events({
'click .add': function(event, template) {
if (this.add != null) {
this.add(event, template);
}
}
});
Template.okCancelControl.events({
'click .cancel': function(event, template) {
if (this.cancel != null) {
this.cancel(event, template);
}
},
'click .submit': function(event, template) {
if (this.submit != null) {
this.submit(event, template);
}
}
});
I then connected the callbacks using handlebars' #with
block helper.
<template name='addInsect'>
{{#with controlCallbacks}}
{{#if addingInsect}}
<section class='form'>
{{> insectErrors}}
<label for='scientificName'>Scientific Name <input type='text' id='scientificName' /></label>
<label for='commonName'>Common Name <input type='text' id='commonName' /></label>
{{> okCancelControl}}
</section>
{{else}}
{{> addControl}}
{{/if}}
{{/with}}
</template>
And the corresponding javascript that creates the callbacks relevant to this form.
Session.set('addingInsect', false);
Template.addInsect.controlCallbacks = {
add: function() {
Session.set('addingInsect', true);
Session.set('addInsectErrors', null);
},
cancel: function() {
Session.set('addingInsect', false);
Session.set('addInsectErrors', null);
},
submit: function() {
var attrs, errors;
attrs = {
commonName: DomUtils.find(document, 'input#commonName').value,
scientificName: DomUtils.find(document, 'input#scientificName').value
};
errors = Insects.validate(attrs);
Session.set('addInsectErrors', errors);
if (errors == null) {
Session.set('addingInsect', false);
Meteor.call('newInsect', attrs);
}
}
};
Template.addInsect.addingInsect = function() {
Session.get('addingInsect');
};
Template.addInsect.events = {
'keyup #scientificName, keyup #commonName': function(event, template) {
if (event.which === 13) {
this.submit();
}
}
};
In the submit callback I had to use DomUtils.find
rather than template.find
because template
is an instance of okCancelControl, not addInsect.
这篇关于流星中的模板重用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!