繁体   English   中英

如何从Meteor中的动态模板调用方法

[英]How to call a method from a dynamic template in Meteor

我正在Meteor中建立一个设置页面,其中将包含用于许多设置类别的动态模板。

我想做的是在类别模板中有一个方法,当我单击父模板上的“提交”按钮时,该方法将被调用。

settings.html

<div>
  {{> Template.dynamic template=settings}}
  <div class="submit">
    <button>Save Changes</button>
  </div>
</div>

settings.coffee

Template.settings.events
    'click .submit button': ->
        dynamiclyLoadedTemplate.save()

my-dynamic-template.coffee

Template.dynamicTemplate.onCreated ->
    @save = ->
        # doSomething()

my-other-dynamic-template.coffee

Template.otherDynamicTemplate.onCreated ->
    @save = ->
        # doSomethingElse()

这可能吗?

我应该将这些方法创建为窗口方法,而不是模板方法吗?

您可以在子模板中添加以下代码:

Template.childTemplate.onCreated ->

    settingsTemplate = this.parentTemplate(...) # ... = number of upstream levels
    settingsTemplate.child ?= []
    settingsTemplate.child.push this

    @save = ->
        console.log 'Save called'

因此,您可以在父模板上调用以下代码:

Template.parentTemplate.events

    'click .submit button': ->
        console.log 'submit button clicked'

        instance = Template.instance()

        if instance.child?.length > 0
            for child in instance.child
                child.save?()

我有一个类似的模式,我只是将事件附加到父模板(加载动态模板的事件)。 数据上下文将是父级的,但仍比将方法附加到窗口对象更好,因为在我的情况下,子模板无论如何都处理相同类型的对象。

在您的情况下,首先将动态模板的父模板本身作为模板:

<template name="parent">
  <div>
    {{> Template.dynamic template=settings}}
    <div class="submit">
      <button>Save Changes</button>
    </div>
  </div>
</template>

然后只需将事件附加到该父对象:

Template.parent.events
    'click .submit button': ->
        save() // generic save function you've defined, for example in this file

当动态包含的模板具有相同类型的对象并且通常具有相似的DOM元素(至少是要将事件附加到的元素)时,此方法会很好地工作。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM