associazione bidirezionale tra array di attributi oggetto (enum sul server) e gruppo di caselle ember

Question

Sto cercando una soluzione per associare un attributo di oggetto che contiene una matrice di stringa (che rappresenta un enum sul server) a un elenco di checkbox . L'associazione dovrebbe essere bidirezionale.

Sul server, abbiamo alcune definizioni di enum, ad esempio, Ruolo con i valori "ADMIN", "GUEST", "USER". Un oggetto utente può avere diversi ruoli quindi, così l'oggetto utente in Ember è nella forma

App.User = Ember.Object.create({ 
    roles: ["USER", "ADMIN"] 
}); 

Nella gestione utenti, dovrebbe esserci un gruppo di caselle. Una casella di controllo per ruolo. Quindi, è possibile selezionare nessuno, tutti o diversi.

So che c'è la vista Ember.Checkbox che può essere utilizzata per questo. Quello che sto cercando sarebbe una visione facile e generica per gestire qualsiasi tipo di enumerazione come menzionato sopra.

Pertanto, le domande sono:

• ha qualcuno una bella soluzione per questo?
• qualcuno conosce un progetto opensource che fornisce tali estensioni a ember?

Grazie in anticipo. // ph

Answer 1

Un modo generico per gestire un legame bidirezionale tra un oggetto Ember e le caselle di controllo può essere implementato utilizzando Ember.js semplice senza la necessità di alcun plug-in se si desidera sincronizzare l'enumerazione sul server e sul client manualmente (usando AJAX o WebSockets). Nota che Ember può aggiornare l'elenco delle opzioni con Checkbox automaticamente dopo una sincronizzazione.

Quindi d'ora in poi, mi si supponga di avere am enum con ruoli come un array Ember:

App.Roles = [ "USER", "ADMIN", "GUEST" ]; 

Poi ci mostrerà le opzioni disponibili per l'utente in un CollectionView come questo (il modello è riportata qui sotto).

OptionsView = Em.CollectionView.extend({ 
    contentBinding: 'App.Roles', // Show a list of _all_ available roles 
    userBinding: 'App.User',  // This points to the active user 
    tagName: 'ul',    // Shown as a <ul> 
    itemViewClass: Em.View.extend({ 
     userBinding: 'parentView.user', // For convenience 
     templateName: 'user-roles' // Defined later 
    }) 
}); 

Il modello per ogni opzione è:

<script data-template-name="user-roles" type="text/x-handlebars"> 
    <label> {{view App.RoleCheckbox 
      contentBinding="view.content"}} 
    {{view.content}} 
    </label> 
</script> 

Nota che l'uso di tag <label> fa in modo che l'evento del Casella click è sparato sulla cliccando in qualsiasi punto del tag.

Infine il App.RoleCheckbox è un'estensione della classe Ember.Checkbox che gestisce la checked proprietà e click evento per alternare il ruolo:

App.RoleCheckbox = Em.Checkbox.extend({ 
    userRolesBinding: 'parentView.user.roles', // Points to the roles of the user 

    checked: function() { 
     var userRoles = this.get('userRoles'); 
     return userRoles.contains(this.get('content')); 
    }.property('content', 'userRoles.@each'), 

    click: function (evt) { 
     var isPresent = this.get('checked'), 
      userRoles = this.get('userRoles'), 
      role  = this.get('content'); 

     if (!isPresent) { 
      userRoles.pushObject(role); 
     } else { 
      userRoles.removeObject(role); 
     } 
    } 
}); 

Un esempio di lavoro di questo è: http://jsfiddle.net/BLQBf/ (Guarda la console per vedere la messaggi di registro)

Si noti che questo non è completamente Ember-esque, dal momento che la vista sta facendo parte del lavoro previsto per il controller. Idealmente, l'evento click chiamerebbe una funzione su RoleCheckboxController che apporterebbe modifiche all'oggetto User.