Динамическое добавление текстовых полей в Meteor без использования jquery

Question

У меня есть простая форма заявки. При нажатии одной кнопки мне просто нужно добавить текстовые поля, а при нажатии другой кнопки просто динамически удалить текстовое поле.

Как это можно сделать в метеоре без использования jQuery, так как я видел много блогов, в которых говорится, что использование jQuery с метеором не очень хорошая практика. Может ли кто-нибудь сказать мне, как это может быть достигнуто без использования JQuery.

Answer 1

Вы можете использовать реактивную переменную и помощник, который возвращает массив на основе этой реактивной переменной для создания уровня шаблона. {{#each}} заявления. Хорошим выбором для реактивной переменной является переменная Session, поскольку она встроена в Meteor (вам не понадобится пакет ReactiveVar или для настройки ваших собственных зависимостей).

Затем вы можете использовать обработчики событий для обновления реактивной переменной по мере необходимости. Например...

//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>

В соответствии с комментарием Ибрагима ниже, если вы хотите удалить текстовые поля, вам нужно будет отслеживать значения в текстовых полях и заполнять их каждый раз при удалении элемента. Вы можете увидеть полную работу в действии здесь. Заметьте, что для этого я обманул и фактически использовал jQuery, потому что так было проще (по крайней мере, для меня).

Альтернатива без jQuery может включать настройку функции onCreated для хранения ссылки на каждый input Экземпляр шаблона, из которого вы могли бы получить необходимую информацию, но по этому вопросу нет способа получить все экземпляры определенного шаблона через Meteor API, что было бы самым простым способом сделать это без jQuery.

Редактировать: MeteorPad больше не существует. Приведенный выше код включает обработку добавления и удаления конкретного ввода с использованием реактивной переменной Session. Сейчас я поддерживаю текущее значение ввода в переменной Session, и я использую этот новый value свойство для заполнения значения при каждом повторном заполнении входных данных (при обновлении переменной Session).

Вы можете видеть, что постоянное чтение материала с экрана и обновление массива входных данных в переменной Session является довольно ручным и утомительным - что заставляет меня думать, что это, вероятно, не лучший способ сделать это.

Answer 2

Одним из возможных решений было бы использование переменных сеанса. Когда кнопка нажата, установите значение переменной сеанса на то, что вы хотите. В вашем шаблоне вы можете показать значение переменной сеанса, где вам нужно.

Также jquery автоматически включается в метеор. Определенно есть места, где можно использовать jquery в метеорных приложениях. Может быть даже чище, чем использование переменных сеанса местами. Зависит от ситуации.