Power-Auswahl zeigt den ausgewählten Wert nicht an

Question

Meine Power-Auswahl zeigt den ausgewählten Wert nicht an.

Ich habe drei Power-Selects in dieser Komponente und zwei sind in Ordnung, aber die dritte (CompanyType) verhält sich seltsam - der Wert ist leer, wenn Sie zuerst zum Formular gehen. Wenn Sie einen Wert wählen Sie es für diesen Datensatz kleben bleibt von da an (bis Sie die Seite aktualisiert)

Vorlage:

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

    } 
}); 

Und hier ist der Weg und das Modell Haken :

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

die Route, die das companyType Modell erhält, ist:

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

Und meine Modelle:

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

Mit Blick auf Ember Inspektors, um die Daten für die companyType ist da und ist ein String, pro mein Modell. Wenn ich einen Wert aus der Drop-Box auswähle, wird der Datentyp zu <svegbackend@model:company-type::ember1326:Environ Engineer. Wenn ich eines der anderen Dropdown-Menüs auswähle, bleibt der Wert eine Zeichenkette, die ich für sinnvoll halte, da die Quelle für diese Zeichenketten-Arrays ist.

Also, wie bekomme ich die Dropdown, um den Wert anzuzeigen, wenn das Formular lädt?

Answer 1

Das Problem ist, dass die companyType der company vom Typ String ist, wo als Optionen Liste der dritten Auswahl vom Typ companyType Modell sind. Dies erzeugt einen Konflikt bei der anfänglichen Einstellung der ausgewählten Option.

Definieren der dritten Potenz wie folgt auswählen:

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

und companyTypesOptions innerhalb edit-new-form.js wie folgt definieren:

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

Durch diese Art und Weise; Sie werden sowohl die Optionsliste als auch den ausgewählten Wert vom Typ string erstellen! Vergessen Sie nicht, wenn der Typ der Optionen und der ausgewählte Pass unterschiedlich sind; Sie werden in Schwierigkeiten geraten! Versuche das zu vermeiden!