0

Есть код в html файле:

    {{#each answer in question.answers}}
                    <div id="answer-option-wrapper-{{randomId}}" class="col-md-12 question-answer-option--wrapper">
                        <div class="col-md-12 question-answer-option">
                            <input class="col-md-1" style="margin-top: 0.5em;" name="answer" type="{{radioOrCheckbox question}}">
                            <input id="{{randomId}}" type="text" placeholder="Вариант ответа" class="col-md-10 question-field-answer" style="" value="{{answer}}">

                            <div class="col-md-1 delete-answer-option" style=""><i style="padding:2px"
                                                                                                                                         class="btn btn-danger fa fa-trash"
                                                                                                                                         aria-hidden="true"></i></div>
                        </div>

                    </div>
                {{/each}}

Я использовал id на всякий случай. question.answers - это массив. Есть обработчик change .question-field-answer, который обновляет это значение в БД. DOM напрямую не изменяется.

Проблема в том, что при одинаковых значениях answers, если изменить текст в input, этот текст появляется в соседнем input. Иногда сверху, иногда снизу. В самой mongo коллекции все нормально обновляется. Я подозреваю, что meteor использует значение строки как ключ (почему не использует индекс в массиве?).

1 ответ 1

0

Как я и предполагал, проблема в рендеринге строк. Spacebars почему-то различает строки по значению, а не по индексу в массиве. Вот документация

Решение проблемы - использовать объекты. Объкты различаются по ключу _id или по индексу в массиве.

Сейчас код выглядит вот так:

{{#each answer in question.answers}}
                                <div class="col-md-12 question-answer-option--wrapper">
                                    <div class="col-md-12 question-correct-answer-option {{successClass answer}}"
                                             data-id="{{answer._id}}">
                                        <input id="{{answer._id}}" class="col-md-1 correct-answer-checkbox" style="margin-top: 0.5em;"
                                                     name="answer"
                                                     type="{{radioOrCheckbox question}}" {{isChecked answer.correct true}}>
                                        <label for="{{answer._id}}" class="col-md-11 question-correct-answer">
                                            {{answer.text}}
                                        </label>
                                    </div>

                                </div>
                            {{/each}}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.