Dati di origine appartiene a Seleziona con menu a discesa

Question

Sto cercando di fare qualcosa di semplice con Ember e Ember Data.

1) Messaggi appartiene agli utenti; Gli utenti hasMany Messaggi

2) Nel nuovo modulo di creare post, voglio avere un selezionato/a discesa di tutti gli utenti

3) Quando posso modificare un post (utilizzando lo stesso modulo), voglio legarlo correttamente torna al dropbox

Domanda: Qual è la procedura migliore per eseguire il menu a discesa che si collega all'elenco degli utenti? Come posso associare il modulo di modifica per popolare di nuovo il menu a discesa?

utente Modello:

App.User = DS.Model.extend({ 
    posts: DS.hasMany('post', {async: true}), 
}); 

Messaggio Modello:

App.Post = DS.Model.extend(Ember.Validations.Mixin, { 
    user: DS.belongsTo('user', {async: true}), 
}); 

Crea nuovo modulo per l'inserimento:

{{view Em.Select 
    content=users <<<<< How do I bind this.store.find("user") here? 
    optionValuePath='content.id' 
    optionLabelPath='content.name' 
}} 

non lo faccio und Descrivere la best practice per associare il contenuto selezionato agli utenti.

Tentativo 1:

* Sto usando Ember-Form

{{em-select 
    property="user_id" 
    label="user" 
    prompt="Select user:" 
    content=controllers.users.content 
    optionValuePath="content.id" 
    optionLabelPath="content.first_name" 
    }} 

E sull'azione salvare:

newItem.set('user', this.store.getById('user', this.get('user_id'))); 

Ho cercato di usare id_utente come mia proprietà per la forma, e tradurre di nuovo a un oggetto utente da assegnare al post quando salvi. Tuttavia, questo metodo è un po 'stupido perché sto traducendo attivamente user_id in oggetto utente ogni volta che salvo. Sento che dovrebbe esserci un modo per farlo automaticamente se eseguo il binding corretto, invece di saltare attraverso i cerchi per legare la proprietà come user_id. Ciò rende inoltre difficile il reindirizzamento quando utilizzo lo stesso modulo per la modifica del post. Poiché tutta la relazione è stata impostata, ho la sensazione che sto facendo qualcosa di sbagliato qui. Penso che ci debba essere un modo migliore.

Grazie!

Answer 1

Quando dici dropdown presumo tu intenda una casella di selezione? L'API di Ember ha una vista selezionata che gestisce tutta l'associazione di dati. Here are the docs for Ember.Select.

Si può usare nel modulo di posta in questo modo:

{{view Em.Select 
    content=users 
    selection=user 
    optionValuePath='content.id' 
    optionLabelPath='content.name' 
}} 

Se stai usando Dockyard's awesome ember-easyForm library è possibile utilizzare un Em.Select come questo:

{{input user type='as' 
    collection='users' 
    selection='user' 
    optionValuePath='content.id' 
    optionLabelPath='content.name' 
    prompt='Choose type...' 
}} 

avanzata UI utilizzando Chosen può essere facilmente integrato con Ember like this.

Answer 2

A partire da settembre 2014 c'è un problema con Ember.Select più { async: true }.Non giocano bene insieme.

myModel.get('myAsyncRel') restituirà una promessa, Ember.Select non è una promessa consapevole, quindi non può gestirlo correttamente.

Una soluzione alternativa consiste nell'utilizzare una relazione non asincrona.

• https://github.com/emberjs/data/issues/1405
• https://github.com/emberjs/data/issues/2111

Un'altra soluzione è quella di usare qualcosa di simile:

• http://emberjs.jsbin.com/rwjblue/43/edit?html,css,js,output

Answer 3

Il team brace ha aperto an issue (#5259) per questo problema, stanno progettando di riscrivere l'intera parte Ember.Select.

Nel frattempo è possibile utilizzare this Add-on from thefrontside:

{{#x-select value=bob action="selectPerson"}} 
    {{#x-option value=fred}}Fred Flintstone{{/x-option}} 
    {{#x-option value=bob}}Bob Newhart{{/x-option}} 
{{/x-select}} 

Installarlo con ember install emberx-select

---

EDIT Come Stefan Penner wrote, ora è possibile utilizzare la brace selezionare come segue (jsbin) :

<select onchange={{action "changed" value="target.value"}}> 
    {{#each model.choices key="@identity" as |choice|}} 
     <option value={{choice}} selected={{is-equal currentValue choice}}>{{choice}}</option> 
    {{/each}} 
</select> 

Answer 4

Le nuove informazioni sulla deprecazione sono state aggiunte in Ember 1.13 per Ember Select, vedere http://emberjs.com/deprecations/v1.x/#toc_ember-select.

Il nuovo approccio consigliato in Ember 1.13/2.0 è quello di implementare un componente da soli:

esempio /components/my-select.hbs

<select> 
    {{#each users "id" as |user|}} 
    {{log address}} 
    <option value="{{user.id}}"> 
     user.name 
    </option> 
    {{/each}} 
</select> 

Il collegamento brace viene illustrato come implementare la selezione con selected={{is-equal item selectedValue}} e la creazione di un is-equal aiutante.