ember liquid-teather modals - 设置路线

ember liquid-teather modals - set routes

我已经设置了模态,正在使用液体茶。

我的页面上有 2 个不同的模式 - summer-recipe.hbs: 1 x 莫代尔沙拉 1 x 冰沙模态

两者都有效。

因为两个模式都打开,并且从夏季-recipe.hbs 页面打开。路由文件将是 routes/summer-recipes.js

有没有办法为每个模式设置特定的路线。基本上我希望能够设置 up/have 等同于:

routes/salads.js routes/smoothies.js

下面一个模式的代码片段:

夏天-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);
    }
  }

您需要为router.js中的沙拉定义url,为其创建路线并在您的路线中使用模型钩子来收集必要的数据。既然你想创建和编辑沙拉,你也应该为此创建单独的路线。

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

现在在路线中,他们使用模型挂钩来创建记录(用于新路线)或通过 salad_id 从参数中查找记录(用于编辑路线)。