这是我想出来解决问题的方法,使用了CoffeeScript。如果您没有使用CoffeeScript,可以在
这里将其转换为JavaScript。
首先,定义
extendTemplate
函数:
extendTemplate = (template, mixin) ->
helpers = ({name, method} for name, method of mixin when name isnt "events")
template[obj.name] = obj.method for obj in helpers
if mixin.events?
template.events?.call(template, mixin.events)
template
然后,声明一个带有helpers和events的对象(我的称为loginMixin
),您希望在多个模板之间共享:
loginMixin =
merge_with_email: ->
return Session.get 'account_merge__merge_with_email'
events:
'click button#merge_login': (event, template) ->
email = $(template.find('#email')).val()
password = $(template.find('#password')).val()
Meteor.loginWithPassword email, password, (error)->
if error
console.error "Failed to login."
return false
在声明模板后,你可以使用上述mixin进行扩展。使用以下代码,我正在扩展我的register
和login
模板:
extendTemplate Template.register, loginMixin
extendTemplate Template.login, loginMixin
最后,这是我的
login.html
的样子:
<template name="login">
<div class="alert">
<a class="close" data-dismiss="alert" href="#">×</a>
<h4 class="alert-heading">Merge accounts</h4>
<form id="register_form" class="form-inline" action="#">
<p class="help-block">Please login with {{merge_with_email}}.</p>
<label for="email">Email:</label>
<input id="email" type="text" class="input-medium" />
<label for="password">Password:</label>
<input id="password" type="password" class="input-medium" />
<button class="btn" id="merge_login">Login</button>
</form>
</div>
</template>
由于我也扩展了我的register
模板,因此register.html
也可以使用{{merge_with_email}}
并且还可以处理merge_login
按钮的click
事件。