Meteor Получение динамически генерируемых значений

Question

Я пытаюсь получить значения некоторых динамически сгенерированных выборок, которые я добавляю к форме. Я думаю, что делаю это правильно, но возвращает только первое значение.

Форма шаблона:

<form id="Dynamic" class="add-clients col s12 m10 offset-m1 white z-depth-1"> 
 
     <div class="row"> 
 
     <h4>Add a new company with company contacts.</h4> 
 
     <hr> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="input-field col s12"> 
 
      <i class="material-icons prefix">business</i> 
 
      <input id="company_name" name="company_name" type="text" class="validate"> 
 
      <label for="company_name">Company Name</label> 
 
     </div> 
 
     </div> 
 
     <div class="input-placeholder row"> 
 
     <!--append contact select--> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="add-contacts input-field col s12"> 
 
      {{> ContactSelect}} 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="input-field col s12"> 
 
      <button class="btn-large waves-effect waves-light" href="#" id="s">Save Company</button> 
 
     </div> 
 
     </div> 
 
    </form>

Динамический Выбор шаблона:

Template.ContactSelect.events({ 
 
    'click .add-select'(event){ 
 
    $(".first-select .contact-selectBox").clone().appendTo(".incoming-input").after('<a href="#" class="btn">Remove</a>'); 
 
    }, 
 
});

<template name="ContactSelect"> 
 
    <div class="first-select input-field col s12"> 
 
    <select class="contact-selectBox browser-default"> 
 
     <option value="" disabled selected>Choose your option</option> 
 
     {{#each allContacts}} 
 
     <option value="{{_id}}">{{fullname}}</option> 
 
     {{/each}} 
 
    </select> 
 
    </div> 
 
    <div class="incoming-input input-field col s12"> 
 

 
    </div> 
 
    <div class="multiply-select col s12"> 
 
    <a class="add-select btn-floating btn waves-effect waves-light red"><i class="material-icons">add</i></a> 
 
    </div> 
 
</template>

и, наконец, представить событие для Форма:

Template.ClientAddNew.events({ 
 
    'submit .add-clients'(event, template){ 
 
    event.preventDefault(); 
 
    var selection = {}; 
 
    template.$("option:selected").each(function(index){ 
 
     selection["box"+index] = template.$("option:selected").attr("value"); 
 
    }); 
 
    console.log(selection); 
 
    } 
 
});

Что я нахожу странным, что когда я заменить .attr("value") с .text() он добавляет обе выбранные опции, но concatinates их вместе.

Answer 1

У вас будет плохое время, пытаясь сделать то, что вы делаете, используя выбор браузера по умолчанию.

Используйте полностью выбранный виджет на основе HTML. Затем, подумайте о том, как вы могли бы отметить selected реактивно (рассмотреть атрибут {{selected}} внутри {{#each allContacts}} ... блока Затем, если вы хотите, чтобы манипулировать текст что-либо, манипулировать им с помощью allContacts помощника, например:..

<div class='select-widget'> 
{{#each allContacts}} 
    <div id='{{_id}}' class='select-widget-row {{#if selected}}selected{{/if}}'> 
     {{fullname}} 
    </div> 
{{/each}} 
</div>