2

我正在尝试在我的 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}}
    <!-- form elements -->
    {{> okCancelControl}}
  {{else}}
    {{> addControl}}
  {{/if}}
</template>

editing是一个Session布尔值。

连接控件以显示、隐藏和“提交”表单的好方法是什么？

4

2 回答 2

2

主要问题是从控制模板（“提交”事件触发的地方）中找到 addInsect 模板（数据所在的地方）。这是我所做的：

首先，控件：

<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>

现在是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) {
      this.cancel(event, template);
    }
  },
  'click .submit': function(event, template) {
    if (this.submit != null) {
      this.submit(event, template);
    }
  }
});

#with然后我使用把手的块助手连接回调。

<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>

以及创建与此表单相关的回调的相应 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);
  },
  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();
    }
  }
};

在提交回调中我不得不使用DomUtils.find而不是template.find因为template是 okCancelControl 的一个实例，而不是 addInsect。

于 2013-01-02T02:10:40.073 回答
1

你可以用Session这个。您只需要一个模板助手，它返回一个boolean标志，指示您是否正在编辑表单字段。并根据此模板助手设置的 Session 值操作 DOM。

假设您有一个文本输入，现在当您在其中输入文本时，将 Session 标志设置为true. 这将触发帮助程序返回 true flag，基于此，您的两个模板之一将在 DOM 中呈现。

isEditing是每当您更改 Session 值时触发的助手。这个辅助函数是这里的主要部分，它根据您设置的会话值返回真/假。

 Template.insectForm.isEditing = function(){
    if(Session.get('isEditing')){
     return true;
    }
    else{
     return false;
    }
 }

请记住在启动时将 Session 设置false为：

$(document).ready(function(){
    Session.set('isEditing', false);
})

这将在 html 中呈现默认值add template，现在当您单击添加时，您需要显示另一个模板，为此，将 Session 设置为 true 为：

'click .add' : function(){
    Session.set('isEditing', true);
}

因此，当您单击 CANCEL 时，将会话设置为false，这将isEditing返回false并显示默认值add template。

因此，您的完整 html 将如下所示：

<template name='insectForm'>    
  {{#if isEditing}}
    <!-- form elements -->
    <input type="text" id="text" value="">
    {{> okCancelControl}}
  {{else}}
    {{> addControl}}
  {{/if}}
</template>

<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.insectForm.events = {
   'click .submit' : function(event, template){
      //your event handling code
   }
}

该参数template是事件源自的模板的实例。

请注意，尽管事件从okCancelControl模板内的图像触发，但参数仍将包含insectForm模板的实例。这是因为我们将事件处理程序称为Template.insectForm.events = {}.

另请参阅此答案以获取模板实例。

于 2012-12-31T12:38:19.763 回答