在 Meteor 中动态添加文本字段而不使用 jquery [英] Adding text fields dynamically in Meteor without using jquery

问题描述

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

I have a simple application form. On click of one button I just need to add text fields and on click of another button, just remove text field dynamically.

如何在不使用 jQuery 的情况下在meteor 中做到这一点，因为我看到很多博客都说在meteor 中使用jQuery 不是一个好习惯.谁能告诉我如何在不使用 jQuery 的情况下实现这一点.

How can this be done in meteor without using jQuery as I have seen many blogs that says it is not a good practice to use jQuery with meteor. Can any tell me how can this be achieved without using jQuery.

推荐答案

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

You can use a reactive variable and a helper that returns an array based on that reactive variable to construct template-level {{#each}} statements. A good choice for a reactive variable is the Session variable, since it's built into Meteor (you won't need the ReactiveVar package or to set up your own dependencies).

然后，您可以使用事件处理程序来适当地更新反应性变量.例如...

Then, you can use event handlers to update the reactive variable as appropriate. For example...

//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);
  }
});

你的模板看起来像......

Your templates would look something like...

<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 的评论，如果您想删除文本字段，则需要跟踪文本字段中的值，并在每次删除元素时重新填充它们.您可以在此处查看完整的工作流程.请注意，为了做到这一点，我作弊并确实使用了 jQuery，因为这样做更容易(至少对我而言).

As per Ibrahim's comment below, if you want to delete the text fields, you'll need to keep track of the values in the text fields and repopulate them every time you delete an element. You can see the full work-up in action here. Note that in order to do this, I cheated and actually did use jQuery, because it was way easier to do it that way (at least for me).

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

A jQuery-less alternative might involve rigging up the onCreated function to store a reference to each input template instance, from which you might be able to pull the necessary information, but per this question there is no way to get all instances of a particular template through the Meteor API, which would be the easiest way to do it without jQuery.

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

MeteorPad no longer exists -- The code above includes handling adding and removing a specific input using the reactive Session variable. I am now maintaining the current value of the input in the Session variable, and I use this new value property to populate the value every time the inputs are re-populated (when the Session variable updates).

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

You can see that constantly reading stuff off the screen and updating the array of inputs in the Session variable is quite manual and tedious -- which makes me think this is probably not the best way to be doing this.

这篇关于在 Meteor 中动态添加文本字段而不使用 jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！