ember liquid-teather modals - set routes

Question

I have setup my modals, and am using liquid-teather.

I have 2 different modals on my page - summer-recipe.hbs: 1 x salads modal 1 x smoothies modal

Both work.

As both modals are on, and open from the summer-recipe.hbs page. The route file would be routes/summer-recipes.js

Is there a way to set a specific route up for each modal. Basically I'd like to be able to set up/have the equivalent to:

routes/salads.js routes/smoothies.js

Snippets of code for one modal below:

summer-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}}

controllers/summer-recipes.js:

  showSaladsDialog: gte('newUser', 1),

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

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

Answer 1

You need to define url for salads in router.js, create Route for it and use model hook in your Route to collect necessary data. Since you want to create and edit salads you should create separate routes for that also.

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

Now in Routes for them use model hook to createRecord(for new Route) or findRecord by salad_id from params(for edit Route).