La sélection de l'alimentation n'affiche pas la valeur sélectionnée

Question

Ma sélection d'alimentation n'affichera pas la valeur sélectionnée.

J'ai trois power-selects dans ce composant et deux fonctionnent bien, mais le troisième (companyType) agit bizarrement - la valeur est vide quand vous allez d'abord au formulaire. Lorsque vous sélectionnez une valeur, il colle pour cet enregistrement à partir de là (jusqu'à ce que vous actualisez la page)

Modèle:

// templates/components/companies/edit-new-form.hbs 
{{#bs-form formLayout=formLayout model=company onSubmit=(action "save") as |form|}} 
    <label>State: 
     {{#power-select 
     selected=company.state 
     options=states 
     onchange=(action "chooseState") 
     as |name| 
     }} 
     {{name}} 
     {{/power-select}} 
    </label> 

    <label>County: 
     {{#power-select 
     selected=company.county 
     options=countyNames 
     onchange=(action "chooseCounty") 
     as |name| 
     }} 
     {{name}} 
     {{/power-select}} 
    </label> 

    <label>Company Type: 
     {{#power-select class="select" 
     selected=company.companyType 
     options=companyTypes 
     onchange=(action "chooseCompanyType") 
     as |name| 
     }} 
     {{name.companyType}} 
     {{/power-select}} 
    </label> 
{{/bs-form}} 

JS:

// componnents/companies/edit-new-form.js 
export default Ember.Component.extend({ 
    company: null, 
    router: Ember.inject.service('-routing'), 
    ajax: Ember.inject.service(), 
    store: Ember.inject.service(), 

    countyNames: Ember.computed('company.state', function() { 
    return this.get('ajax').request(config.host + '/api/counties/' + this.company.get('state')).then((json) => json.map((county) => { 
     return county.countyName; 
    }) 
) 
}), 

    states: ['AK', 'AL', 'AR', 'AZ', 'CA', 'CO', 'CT', 'DC', 'DE', 'FL', 'GA', 'HI', 'IA', 'ID', 'IL', 'IN', 'KS', 'KY', 'LA', 'MA', 'MD', 'ME', 'MI', 'MN', 'MO', 'MS', 'MT', 'NC', 'ND', 'NE', 'NH', 'NJ', 'NM', 'NV', 'NY', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VA', 'VT', 'WA', 'WI', 'WV', 'WY'], 

    actions: { 
    // For dropdown handling 
    chooseState(state) { 
     this.set('company.state', state); 
     //Ember.set(this, "counties", this.get('ajax').request(config.host + '/api/counties/' + state).then((json) => json.items)); 
     //this.set('counties', this.get('ajax').request(config.host + '/api/counties/' + state).then((json) => json)); 
    }, 

    chooseCounty(countyName) { 
     this.set('company.county', countyName); 
    }, 

    chooseCompanyType(companyType) { 
     this.set('company.companyType', companyType); 
    }, 

    } 
}); 

Et voici l'itinéraire et crochet modèle :

// routes/companies/edit.js 
export default Ember.Route.extend({ 
    model(params) { 
    var store = this.store; 
    return Ember.RSVP.hash({ 
     companies: store.findRecord('company', params.company_id), 
     companyTypes: store.findAll('companyType') 
    }); 
    } 
}); 

la route qui obtient le modèle companyType est:

// routes/company-types.js 
export default Ember.Route.extend({ 
    model() { 
    return this.get('store').findAll('company-type'); 
    } 
}); 

Et mes modèles:

// models/company.js 
export default DS.Model.extend({ 
    companyName: DS.attr('string'), 
    street: DS.attr('string'), 
    county: DS.attr('string'), 
    city: DS.attr('string'), 
    state: DS.attr('string'), 
    zip: DS.attr('string'), 
    phone: DS.attr('string'), 
    email: DS.attr('string'), 
    fax: DS.attr('string'), 
    companyType: DS.attr('string') 
}); 

// models/company-type.js 
export default DS.Model.extend({ 
    companyType: DS.attr('string') 
}); 

En regardant Ember Inspecteur des données pour l'companyType est là et est une chaîne, par mon modèle. Lorsque je sélectionne une valeur dans la boîte de dépôt, le type de données se transforme en <svegbackend@model:company-type::ember1326:Environ Engineer. Lorsque je sélectionne l'une des autres listes déroulantes, la valeur reste une chaîne qui, je suppose, a du sens puisque la source pour ceux-ci sont des tableaux de chaînes.

Alors, comment puis-je obtenir la liste déroulante pour afficher la valeur lorsque le formulaire se charge?

Answer 1

Le problème est que le companyType du company est de type string où les options du troisième select sont de type companyType. Cela crée une discordance dans la définition initiale de l'option sélectionnée.

Définir la troisième puissance de sélection comme suit:

{#power-select class="select" 
    selected=company.companyType 
    options=companyTypesOptions 
    onchange=(action "chooseCompanyType") 
    as |name| 
}} 
    {{name}} 
{{/power-select}} 

et définie à l'intérieur de companyTypesOptionsedit-new-form.js comme suit:

companyTypesOptions: Ember.computed('companyTypes.[]', function() { 
    return this.get('companyTypes').map((companyType)=> { 
     return Ember.get(companyType, 'companyType'); 
    }); 
}) 

De cette manière; vous ferez à la fois la liste des options et la valeur sélectionnée du type string! Ne pas oublier si le type des options et le choix que vous passez sont différents; vous aurez des ennuis! Essayez d'éviter cela!