如何将函数传递给Meteor模板?

时间:2014-09-30 03:56:51

标签: javascript meteor

我想插入一个Meteor模板(一个简单的登录表单),但我想控制表单提交后发生的事情。理想情况下,我希望能够将函数afterLogin()传递给模板。但我很不确定如何做到这一点,如果这是可能的话。

我最近看到了一个有趣的软件包viewmodel,而且我不确定它是如何相关的。但是,此上下文中的目标基本上是使用不同的视图模型呈现视图。

有什么想法吗?我目前正在使用会话变量,然后在登录后,我检查该会话变量以运行正确的函数,但这很丑陋并且不易使用。有什么想法吗?

2 个答案:

答案 0 :(得分:6)

我就是这样做的:

我假设您的登录表单是从父模板中调用的,使用attributes语法将自定义帮助程序的值传递给登录表单的数据上下文。

<template name="parent">
  {{> loginForm options=loginFormOptions}}
</template>

帮助器返回一个封装函数的对象,调用者负责将此函数设置为他们想要的任何东西。

Template.parent.helpers({
  loginFormOptions:function(){
    return {
      afterLogin:function(){
        // we assert that the context is correct :
        // this will print Template.loginForm
        console.log(this.view.name);
      }
    };
  }
});

您的登录表单代码充当库,可以从其数据上下文中读取调用者模板传递的函数,然后使用正确的this上下文调用该函数。

Template.loginForm.events({
  "submit":function(event,template){
    // ...
    Meteor.loginWithPassword(...,function(error){
      if(error){
        console.log(error);
        return;
      }
      // guard against the existence of the custom afterLogin function
      if(template.data.options && template.data.options.afterLogin){
        // execute the custom function with proper context
        template.data.options.afterLogin.call(template);
      }
    });
  }
});

答案 1 :(得分:0)

首先,我会使用铁路由器浏览应用程序的不同视图,您可以在此处获取: https://github.com/EventedMind/iron-router

meteor add iron:route

然后,检查http://docs.meteor.com/#template_events。我会使用类似的东西:

Template.loginFormTemplate.events({
  'click .loginButton': function() {
    //... if success login ...
    Router.go('nextScreen');
  }
});

[更新1]

我担心尝试将功能传递给Route是Meteor架构意义上的丑陋方法。

您可以尝试定义一些全局变量,该变量负责跨路径侦听和前向触发事件

var eventHelper = (function () {
    var self = _.extend({
        afterLogin: function () {
            self.trigger('forwardedEvent');
        }}, Backbone.Events);

    return self;
})();


Route1.events({
    'click': function () {
        //... Let's call after login
        eventHelper.afterLogin();
    }
});

eventHelper.on('forwardedEvent',function() {
   // ... 
});