2016-06-06 6 views
0

Ich habe meine modals eingerichtet, und benutze liquid-teather.ember flüssig-teather modals - set routen

Ich habe 2 verschiedene modals auf meiner Seite - Sommer-recipe.hbs: 1 x Salate modal 1 x Smoothies

modal

Beide arbeiten.

Da beide Modale eingeschaltet sind, und öffnen Sie von der Sommerrezept.hbs Seite. Die Routendatei wäre routes/summer-recipes.js

Gibt es eine Möglichkeit, eine bestimmte Route für jedes Modal festzulegen. Grundsätzlich würde ich in der Lage sein möchte einzurichten/haben das Äquivalent zu:

Routen/salads.js Routen/smoothies.js

Code-Schnipsel für eine modale unter:

Sommer -recipes.hbs:

{{#if showSaladsDialog}} 
{{#liquid-tether 
to="modal-dialog" 
target="document.body" 
targetModifier="visible" 
attachment="middle center" 
tetherClass="modal-dialog" 
overlayClass="modal-backdrop"}} 
<div class="row"> 
    <div class="col-md-9"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h4 class="modal-title">Salads</h4> 
      </div> 

      <div class="modal-body"> 
       <div class="container"> 
        <div class="row"> 
         <div class="col-md-12"> 
          Salads content... 
         </div><!-- /.right col --> 
        </div><!-- /.row --> 
       </div><!-- /.container --> 
      </div> 

      <div class="modal-footer"> 
       <button type="button" 
         class="btn btn-close" {{action "closeSaladsModalDialog"}}> Close 
       </button> 
      </div> 
     </div> 
    </div> 
</div> 
{{/liquid-tether}} 
{{/if}} 

Controller/Sommer-recipes.js:

showSaladsDialog: gte('newUser', 1), 

    actions: { 
    openSaladsModalDialog() { 
     this.set('editUser', 1); 
    }, 

    closeSaladsModalDialog() { 
     this.set('editUser', 0); 
    } 
    } 
+0

Sie können die gleiche Route für Salate definieren, die Sie für das Sommerrezept definiert haben. –

+0

Ich verstehe es nicht. Ich brauche das Modal, um bestimmte Informationen abhängig von der Route zu öffnen. Z.B. Wenn jemand ein AddNewSalad-Modal öffnen würde, würde es ein Formular mit leeren Feldern geben. – Pepper

+0

Aber wenn dort ein "editSalad" -Modal geöffnet wird, enthält das Feld Daten von dem Salat, den sie gerade bearbeitet haben. Dann würde es auch ein Modal geben, um nur die Salat-Info 'viewSalad' zu sehen. – Pepper

Antwort

1

Sie müssen URL für Salate in router.js definieren, Route für sie erstellen und Modell-Hook in Ihrer Route verwenden, um erforderliche Daten zu sammeln. Da Sie Salate erstellen und bearbeiten möchten, sollten Sie auch dafür separate Routen erstellen.

this.route('salads', function() { 
    this.route('new'); 
    this.route('edit', { path: '/salads/:salad_id' }); 
}); 

nun in Routes für sie Modell Haken create verwenden (für neue Route) oder Suchendatensatz von salad_id von params (für Route bearbeiten).

Verwandte Themen