WedX - журнал о программировании и компьютерных науках

Как динамически добавлять элементы управления вводом с помощью Meteor?

У меня есть форма в погоде, в которой пользователь должен добавить столько строк, сколько ему нужно. Он нажимает кнопку, и ввод добавляется ниже другого. Я могу сделать это с помощью jQuery, но я бы предпочел использовать ресурсы Meteor. Возможно ли это сделать?

21.07.2014

Ответы:


1

Да, вот пример одного из моих приложений с использованием пакета подчеркивания.

В основном шаблоне:

<template name="ask">
{{#each answerArray}} 
    {{>answer}} 
{{/each}}

<button id="addItem">Add item</button>
</template>

<template name="answer">
<div class="input-group pt10">
    <input class="form-control answer" maxlength="30" placeholder="Answer (max 30 chars)" name="answer" />
    <span class="input-group-btn">
        <button class="btn btn-danger delButton" id="{{id}}" data-id="{{id}}" type="button">Delete</button>
    </span>
</div>
</template> 

В js-файле:

Template.ask.created = function () {
    Session.set('action', 'ask');
    answerArray = [ //adding at least two items but it could also be empty
        {
            id: Random.id(), //using this to give an unique id to the control
            value: ''
        },
        {
            id: Random.id(),
            value: ''
        }
    ];
    Session.set('answerArr', answerArray);
}

И событие клика:

Template.ask.events = {
'click #addItem': function () {
    var answerArray = Session.get('answerArr');
    answerArray.push({
        id: Random.id() //just a placeholder, you could put any here
    });
    Session.set('answerArr', answerArray);
}
}

И, наконец, помощник:

Template.ask.helpers({
answerArray: function () {
    var answerArray = Session.get("answerArr")

    while (answerArray.length < 2) { //i chose to have it between 2 and 6, you can remove these
        answerArray.push({
            id: Random.id() 
        })
    }
    while (answerArray.length > 6) { // maximum
        answerArray.pop();
    }
    Session.set('answerArr', answerArray);
    return answerArray;
}
}

Это реактивно увеличит количество входов. После этого, если вы хотите обработать входные данные, вы можете сделать следующее в событии отправки формы или нажатии кнопки:

'click #saveQ': function (e) {
    e.preventDefault();
    var arr = [];
    _.each($('.answer'), function (item) {
        if ($(item).val() != '')
            arr.push({
                answer: $(item).val(), //this you customize for your own purposes
                number: 0
            })
    });

А также, если вы хотите удалить ввод со страницы, вы можете использовать:

Template.answer.events = {
'click .delButton': function (e) {
    var thisId = $(e.target).attr("id");

    var answerArray = Session.get('answerArr');

    var filteredArray = _.filter(answerArray, function (item) {
        return item.id != thisId;
    });

    Session.set('answerArr', filteredArray);
}
}
22.07.2014
  • Это круто. Именно то, что я искал. 21.01.2015
  • Это работает. Единственная проблема, которую я обнаружил, это удаление элемента. Если у меня есть элементы 1,2,3,4,5, когда я удаляю номер 3, он фактически удаляет данные номера 5, если это имеет смысл. 26.01.2015
  • Это может иметь смысл, но ты должен показать мне свой код. Я помню, что однажды ударил что-то подобное, хотя не знаю, как я это исправил. 29.01.2015
  • Что ж. способ, которым я обошел это, заключался в том, чтобы помещать событие изменения в мой ввод, чтобы обновлять массив answerArr в сеансе каждый раз, когда происходит изменение. Таким образом, когда я удаляю элемент, он по-прежнему сохраняет значение других элементов. 30.01.2015
  • @Rafael или AndreasFruth было бы ужасно, если бы вы могли опубликовать свои решения этой проблемы: D Я сталкиваюсь с той же проблемой в данный момент. 13.11.2015
  • Большое спасибо! Я решил это, используя эти принципы.. однако я чувствую, что должен быть другой способ.. Мне пришлось использовать селекторы, такие как .children для моего решения: score_name: item.children[0].children[0].value... Это работает, но не очень элегантно 28.12.2015
  • Новые материалы

    Как создать диаграмму градиентной кисти с помощью D3.js
    Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..

    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..

    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..


    Для любых предложений по сайту: [email protected]