javascript - 在不使用 jquery 的情况下在 Meteor 中动态添加文本字段

Question

我有一个简单的申请表。单击一个按钮，我只需要添加文本字段，单击另一个按钮，只需动态删除文本字段。

如何在不使用 jQuery 的情况下在 meteor 中完成此操作，因为我看到很多博客都说将 jQuery 与 meteor 一起使用不是一个好习惯。谁能告诉我如何在不使用 jQuery 的情况下实现这一目标。

Answer 1

您可以使用一个 react 变量和一个返回基于该 react 变量的数组的助手来构造模板级 {{#each}} 语句。 react 变量的一个不错的选择是 Session 变量，因为它内置于 Meteor 中(您不需要 ReactiveVar 包或设置您自己的依赖项)。

然后，您可以使用事件处理程序来适本地更新 react 变量。例如……

//client only code
Template.test.onCreated(function() {
  Session.set('inputs', []); // on page load, set this to have no inputs
});

Template.test.helpers({
  inputs: function () {
    return Session.get('inputs'); // reactively watches the Session variable, so when it changes, this result will change and our template will change
  }
});

// Now we'll set up a click handler to add inputs to our array when we   click the "add" button
Template.test.events({
  'click #add-input': function () {
    var inputs = Session.get('inputs');
    var uniqid = Math.floor(Math.random() * 100000); // Give a unique ID so you can pull _this_ input when you click remove
    inputs.push({uniqid: uniqid, value: ""});
    Session.set('inputs', inputs);
  }
});
// We also need handlers for when the inputs themselves are changed / removed
Template.input.events({
  'click .remove-input': function(event) { 
    var uniqid = $(event.currentTarget).attr('uniqid');
    inputs = Session.get('inputs');
    inputs = _.filter(inputs, function(x) { return x.uniqid != uniqid; });
    Session.set('inputs', inputs);
  },
  'change input': function(event) { 
    var $input = $(event.currentTarget);
    var uniqid = $input.attr('uniqid');
    inputs = Session.get('inputs');
    index = inputs.findIndex(function(x) { return x.uniqid == uniqid; });
    inputs[index].value = $input.val();
    Session.set('inputs', inputs);
  }
});

您的模板看起来像...

<template name="test">
  <button id='add-input'>
    Add Input
  </button>

  {{#each inputs}}
    {{> input}}
  {{/each}}
</template>
<template name='input'>
  <input name='testinput' class='test-input' type='text' uniqid="{{uniqid}}" value="{{value}}">
  <button class='remove-input' uniqid="{{uniqid}}">Remove</button>
</template>

根据下面 Ibrahim 的评论，如果您想删除文本字段，则需要跟踪文本字段中的值并在每次删除元素时重新填充它们。您可以看到完整的操作过程 here .请注意，为了做到这一点，我作弊了，实际上确实使用了 jQuery，因为这样做更容易(至少对我而言)。

无 jQuery 的替代方案可能涉及装配 onCreated 函数以存储对每个 input 模板实例的引用，您可以从中提取必要的信息，但根据 this question没有办法通过 Meteor API 获取特定模板的所有实例，如果没有 jQuery，这是最简单的方法。

编辑:MeteorPad 不再存在——上面的代码包括使用 react 性 Session 变量处理添加和删除特定输入。我现在在 Session 变量中维护输入的当前值，并且我使用这个新的 value 属性在每次重新填充输入时(当 Session 变量更新时)填充该值。

您可以看到，不断地从屏幕上读取内容并更新 Session 变量中的输入数组是非常手动且乏味的——这让我认为这可能不是执行此操作的最佳方法。