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

Question

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

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

Answer 1

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

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

Answer 2

Вы можете использовать реактивную переменную и помощник, который возвращает массив на основе этой реактивной переменной для создания инструкций уровня шаблона {{#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> 

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

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

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

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