使 Meteor 对 html 元素具有反应性

Making Meteor reactive for html elements

本文关键字：有反应 元素 html Meteor      更新时间：2023-09-26

所以我有一个模态框，允许用户编辑/保存一些数据。

我只想补充一点，与其他 Meteor 应用程序不同，我不想立即保存数据 - 我希望用户在点击保存之前填写所有字段，它将保存到数据库并发送到服务器等。这主要是因为我希望用户能够点击"取消"按钮来还原所有更改。

我在表单的开头有一个下拉框，根据值，将显示或隐藏字段

                            <select class="form-control" id="ddlNewInputType" placeholder="Enter your input type">
                            <option value="input">Input</option>
                            <option value="formula">Formula</option>
                        </select>

我在这样的场地周围有一个车把，以确定我是否要展示它

                {{#if isFormula }}
                    <div class="row">
                        <input type="text"
                               id="txtNewInputFormula" placeholder="Enter formula">
                    </div>
                {{/if}}

帮手看起来像这样

isFormula: ->
    $('#ddlNewInputType').val() == 'formula'

但是，这不起作用。除了它第一次加载到页面上的时间，它永远不会点击isFormula，可能是因为Meteor不认为任何HTML元素都是反应性的，所以当HTML元素更改时它永远不会重新计算。

解决这个问题的合适方法是什么？是否可以在流星中显式地做出反应？我还在考虑将下拉列表值放入会话变量中，但这似乎很混乱，因为我需要管理此会话变量（请记住在模态框关闭等时清除它）

您的分析是正确的 - 需要涉及一个反应变量，以便您的助手在更改 select 元素后重新评估。基本策略如下所示：

  1. 在创建模板时初始化反应变量。
  2. 每当选择发生变化时，更新反应变量。
  3. 读取帮助程序中的反应变量。

与其使用会话变量，不如使用范围限定为模板的 ReactiveVar。下面是一组修改示例：

Template.myTemplate.helpers({
  isFormula: function() {
    return Template.instance().isFormula.get();
  }
});
Template.myTemplate.events({
  'change #ddlNewInputType': function (e, template) {
    var isFormula = $(e.currentTarget).val() === 'formula';
    template.isFormula.set(isFormula);
  }
});
Template.myTemplate.created = function() {
  // in your code, default this to the current value from
  // your database rather than false
  this.isFormula = new ReactiveVar(false);
};

请记住，您还需要执行以下操作：

$ meteor add reactive-var

请参阅我关于范围反应性的帖子，以获取此技术的完整解释。

相关文章：