本文介绍了流星中的模板重用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

限时删除!!

我试图在我的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.

这篇关于流星中的模板重用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

1403页,肝出来的..

09-08 02:43
查看更多