Ember mehrdimensionale Arrays, Best Practice mit Modelldaten

Question

Regel in Ember, Sie Setup Ihr ​​Modell:

export default Model.extend({ 
    "name": attr('string'), 
    "address": attr('string'), 
    "sports": attr() 
}) 

Sie dann ein Formular erstellen:

{{input value=name}} 
{{input value=address}} 
{{input value=sports}} 

Von dort können Sie den Wert des bekommen Eingang oder den Wert eingestellt:

var name_val = this.get('name'); 
var address_val = this.get('address'); 
var sports_val = this.get('sports'); 

oder einen Wert festgelegt:

012.

this.set('address','123 Main Street'); 

Wie würde man dynamische mehrdimensionale Arrays erstellen und speichern? Zum Beispiel wollen Sie verschiedene Sportarten zur Liste aus:

{{input type="checkbox" name="baseball" checked=baseball.isChecked}} 
{{input type="checkbox" name="football" checked=football.isChecked}} 
{{input type="checkbox" name="hockey" checked=hockey.isChecked}} 

Von dort vielleicht wollen Sie eine Sportart, geprüft wissen, nicht sehen die Benutzer, dass der Sport, oder dass der Sport spielen? Dies könnte mithilfe eines Dropdown-Menüs oder mehrerer Kontrollkästchen erfolgen. Letztlich würde das Endergebnis dieses json sein:

{ 
    'name': 'Matt', 
    'address': '123 Main Street', 
    'sports': { 
     'baseball': 'watch', 
     'hockey': 'play' 
    } 

} 

Es scheint Ember zu Setup-Elemente eine Ebene tiefer, leicht ist, aber was ist mit mehreren, dynamische Werte und Ebenen?

Answer 1

In solch einem Szenario würde ich stattdessen hasMany Beziehung empfehlen. Es würde die Dinge mehr zu flexibel, wenn Sie zum Beispiel mehrere Attribute im Zusammenhang mit dem Sport hinzufügen möchten Sie so leicht tun können:

//user.js 
import DS from 'ember-data'; 
export default Model.extend({ 
    "name": DS.attr('string'), 
    "address": DS.attr('string'), 
    "sports": DS.hasMany('sport') 
}) 

//sport.js 
import DS from 'ember-data'; 
export default Model.extend({ 
    "name": DS.attr('string'), 
    "play": DS.attr('boolean'), 
    "watch": DS.attr('boolean') 
}); 

Da wir die Nutzlast eingebettet werden wollen, können wir von Embedded-Rekord mixin verwenden :

//serializers/user.js 
import DS from 'ember-data'; 

export default DS.RESTSerializer.extend(DS.EmbeddedRecordsMixin, { 
    attrs: { 
    sports: { embedded: 'always' } 
    } 
}); 

die Standard-Nutzlast mit dieser Struktur würde wie folgt aussehen:

{users:[ 
{ 
    'id':1, 
    'name': 'Matt', 
    'address': '123 Main Street', 
    'sports': [ 
     {'id':1, 'name':'baseball', 'watch':true, 'play':false}, 
     {'id':2, 'name':'hockey', 'watch':true, 'play':true} 
    ] 

} 
]} 

Aber wenn Sie unbedingt die Nutzlast müssen aussehen, was Sie haben, dann könnten Sie wa nt in Serializer graben (http://emberjs.com/api/data/classes/DS.RESTSerializer.html), speziell "normalisieren", um Daten an den Client im Format Ember Daten zu füttern und dann "serialisieren", um Daten zu ändern, die an den Server in dem Format gesendet werden, das Sie speichern möchten.