javascript - 使 Meteor 对 html 元素具有反应性

Question

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

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

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

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

我在这样的字段周围有一个 Handlebars ，以确定是否要显示它

                {{#if isFormula }}

                    <div class="row">
                        <input type="text"
                               id="txtNewInputFormula" placeholder="Enter formula">

                    </div>
                {{/if}}

有个像这样的 helper

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

但是，这是行不通的。除了它第一次加载到页面上的时间之外，它永远不会命中 isFormula，这可能是因为 Meteor 不认为任何 HTML 元素是 react 性的，所以当 HTML 元素发生变化时它永远不会重新计算。

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

Answer 1

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

1. 在创建模板时初始化 react 变量。
2. Whenever the select changes, update the reactive variable.
3. 读取助手中的 react 变量。

我们不使用 session 变量，而是使用 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 上的帖子有关此技术的完整说明。