使 Meteor 对 html 个元素具有反应性

Question

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

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

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

                            <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 元素改变时它永远不会重新评估。

解决这个问题的合适方法是什么？是否有可能在 Meteor 中明确地做出反应？我也在考虑将下拉列表值放入会话变量中，但这看起来很乱，因为我需要管理这个会话变量（记得在模式框关闭等时清除它）

Answer 1

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

创建模板时初始化反应变量。
每当 select 发生变化时，更新反应变量。
读取助手中的反应变量。

我们不使用会话变量，而是使用 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

请参阅我在 scoped reactivity 上的 post，了解此技术的完整说明。

使 Meteor 对 html 个元素具有反应性

Making Meteor reactive for html elements

javascript

meteor