如何在 Meteor 中重置表单答案

【问题标题】：How to reset a form in Meteor如何在 Meteor 中重置表单
【发布时间】：2013-12-24 11:48:31
【问题描述】：

我需要重置一个弹出表单，其中的值都是从会话变量中填充的：

Template.customerinfo.name = -> Session.get('activeCustomer').name

现在我正在手动操作：

Template.customerinfo.events
  'click #cancelButton': ->
    Client.getById('inputName').val(Session.get('activeCustomer').name)

Meteor.render 会更加混乱，因为我必须提取当前的表单/模板，使用 Meteor.render 创建一个新的，然后将其插入 DOM。

有没有办法告诉流星重置表单或模板并从其来源中提取值？

【问题讨论】：

旁注：不要使用Meteor.render。当新的 Meteor UI 系统发布时，此 API 将在几周后消失。

标签： meteor

【解决方案1】：

在您的 Handlebars 模板中，即在您执行 Meteor.call() 或集合插入/更新之后，放置这个 jQuery 调用。它返回 DOM 中的第一个表单，然后调用 DOM reset()。

$('.add-post-form')[0].reset();

在您的 HTML 中：

<form class="form-horizontal add-post-form" role="form">
   // Your form HTML.
</form>

另外，请参阅： http://www.w3schools.com/jsref/met_form_reset.asp

【讨论】：

【解决方案2】：

只需使用event.target.name.value = "";

【讨论】：

【解决方案3】：

只需要有一个模板（或变量）将呈现的条件，然后更改该条件。例如在 HTML 中有：

    <Template name="customerinfo">
    {{#if somevariable}}
      {{name}}
    {{/if}}
    </template>

在 JS 中，有...

    var somevariable = true;

还有这些助手：

    Template.customerinfo.name = function(){
       return Session.get('activeCustomer').name;
    }

    Template.customerinfo.somevariable = function(){
       return somevariable
    }

由于模板只有在somevariable为真时才会被渲染，当需要重新渲染表单时，执行函数resetForm()：

    resetForm = function(){
       somevariable = false;
       somevariable = true;
    }

【讨论】：

它不在coffeescript中，但总是有js2coffee.org =)
它不起作用。我尝试使用 somevariable 作为普通 js 变量和会话变量。
如果你使用：|| Template.customerinfo.name = function(){return Session.get('activeCustomer').name;} ||，当你这样做时会发生什么|| Session.set('activeCustomer', 'aDifferentName') ||?这会导致模板刷新吗？理论上应该是因为it creates a reactive context

【解决方案4】：

我认为您可以添加一个隐藏重置按钮来重置您的表单。

css

.hide { display: none; }

车把 tmpl

<template name="btn-reset-hide">

    <input type="reset" class="btn-reset-hide">

</template>

{{> btn-reset-hide}}

resetForm = (tmpl) ->
    if tmpl?
        ($ tmpl.find '.btn-reset-hide').trigger 'click'
    else
        ($ '.btn-reset-hide').trigger 'click'

调用resetForm()

【讨论】：