2013-09-06 3 views
6

Sono nuovo in ember e sto cercando di capire come eseguire il rendering di un modello quando un controllo di selezione cambia.EmberJS: Come eseguire il rendering di un modello alla modifica selezionata

CODICE:

App.LocationTypeController = Ember.ArrayController.extend({ 

    selectedLocationType: null, 

    locationTypeChanged: function() { 
     //Render template 
    }.observes('selectedLocationType') 
}); 

{{view Ember.Select 
    contentBinding="model" 
    selectionBinding="selectedLocationType" 
    optionValuePath="content.id" 
    optionLabelPath="content.name"}} 

Quando la LocationType cambia la funzione locationTypeChanged è sparato nel controller. Ma come faccio a renderizzare alcuni contenuti nella dom da lì? (This.render()?) ...

risposta

7

Sì, è necessario utilizzare solo this.render(), ma la chiave è l'opzione into al suo interno.

App.LocationTypeController = Ember.ArrayController.extend({ 

selectedLocationType: null, 

locationTypeChanged: function() { 
    var selectedLocationType = this.get('selectedLocationType'); 
    this.send('changeTemplate',selectedLocationType); 
}.observes('selectedLocationType') 
}); 

Avere l'azione nel tuo percorso come

changeTemplate: function(selection) { 
      this.render('template'+selection.id,{into:'locationType'}); 
} 

e hanno un {{outlet}} nel modello di 's tuoi locationType.

{{view Ember.Select 
     contentBinding="model" 
     selectionBinding="selectedLocationType" 
     optionValuePath="content.id" 
     optionLabelPath="content.name"}} 

{{outlet}} 

Esempio JSBin per il vostro requisito

4

Se avete bisogno di mostrare solo frament, quando sono presenti qualcosa selezionato, è possibile utilizzare il if manubri aiutante:

Nel modello

... 

{{#if selectedLocationType}} 
    Any content here will be visible when selectedLocationType has some value 
{{/if}} 

... 

{{view Ember.Select 
    contentBinding="model" 
    selectionBinding="selectedLocationType" 
    optionValuePath="content.id" 
    optionLabelPath="content.name"}} 

Spero che aiuti