流星:放置通用模板功能的位置(最佳实践)

时间:2015-01-21 15:50:24

标签: javascript meteor

我应该在哪里放置特定模板常用的函数?

例如,从模板内的不同事件调用的函数。

这仍然被视为帮手,即使我不想在我的模板中调用{{foo}}这个功能吗?

1 个答案:

答案 0 :(得分:2)

如果这些函数使用底层模板实例属性和方法,您可以将它们附加到实例,这是简报订阅表单的简单示例:

HTML

<template name="newsletterForm">
  <form>
    <div class="alert {{alertClass}}">{{alertText}}</div>
    <div class="form-group">
      <label for="address">Email</label>
      <input id="address" type="email" class="form-control" name="address">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</template>

JS

Template.newsletterForm.created=function(){
  this.alertClass=new ReactiveVar("alert-primary");
  this.alertText=new ReactiveVar("Subscribe to our newsletter, we'll send you the best links each week !");
  //
  this.subscribeSuccess=function(){
    this.alertClass.set("alert-success");
    this.alertText.set("Thanks for subscribing !");
  };
  this.subscribeFailure=function(){
    this.alertClass.set("alert-warning");
    this.alertText.set("Could't subscribe you to the newsletter, please double-check your email address !");
  };
};

Template.newsletterForm.helpers({
  alertClass:function(){
    return Template.instance().alertClass.get();
  },
  alertText:function(){
    return Template.instance().alertText.get();
  }
});

Template.newsletterForm.events({
  "submit":function(event,template){
    event.preventDefault();
    //
    var address=template.$("[type='email']").val();
    Meteor.call("newsletterSubscribe",address,function(error,result){
      if(error){
        template.subscribeFailure();
        return;
      }
      template.subscribeSuccess();
      template.find("form").reset();
    });
  }
});

如果他们不使用任何特定于模板实例的属性,您只需将它们声明为文件范围的函数:

function commonFunc(){
}

如果这些功能不打算用作帮助者,我认为没有必要将它们声明为这样。