【问题标题】:How to call a method from a dynamic template in Meteor如何从 Meteor 中的动态模板调用方法
【发布时间】:2015-10-29 00:48:21
【问题描述】:

我正在 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()

这可能吗?

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

【问题讨论】:

    标签: javascript meteor coffeescript meteor-blaze


    【解决方案1】:

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

    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?()
    

    【讨论】:

    • 是的,加布里埃尔,这就是我想要做的!感谢您的回复。
    【解决方案2】:

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

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

    <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 元素时,这很有效,至少是您想要附加事件的那些。

    【讨论】:

    • 如何将事件附加到父模板?当一个或另一个动态模板被渲染时,你能覆盖事件吗?
    • 修改了我的答案以表明这一点。如果您想进行模板级别覆盖,请将这些事件和代码附加到较低级别的模板,而不是弄乱您的通用代码。
    • 如果将 save() 定义为父模板上的通用方法,保存时如何调用子模板特定的操作?
    • 您必须覆盖实际的事件处理程序。例如:Template.child.events 'click .submit button': -&gt; mySave()
    • 如果“.submit 按钮”在父模板中,我如何覆盖事件处理程序?执行Template.child.events 'click .submit button': -&gt; mySave() 不会匹配 DOM 上的任何内容
    猜你喜欢
    • 2014-07-06
    • 1970-01-01
    • 1970-01-01
    • 2015-02-22
    • 2015-07-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多