Meteor Dynamisch erzeugte Werte

Question

Ich versuche, die Werte einiger dynamisch generierter Auswahl zu erhalten, die ich zu einem Formular hinzufüge. Ich denke, ich mache es richtig, aber es gibt nur den ersten Auswahlwert zurück.

Formularvorlage:

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

Die dynamische Vorlage auswählen:

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>

Und schließlich einreichen Ereignis für die Form:

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); 
 
    } 
 
});

Was ich seltsam finde ist, dass, wenn ich .attr("value") mit .text() ersetzen die beiden ausgewählten Optionen hinzufügt, aber es concatinates sie zusammen.

Answer 1

Sie werden eine schlechte Zeit haben zu versuchen, zu tun, was Sie tun, indem Sie den Browser-Standard wählen.

Verwenden Sie ein vollständig HTML-basiertes Select-Widget. Dann überlegen Sie, wie Sie selected reaktiv markieren könnte (man denke an ein {{selected}} Attribut in Ihrem {{#each allContacts}} ... Block dann, wenn Sie den Text etwas manipulieren wollen, manipulieren sie die allContacts Helfer verwendet. Zum Beispiel:.

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