Question

我已经设置了我的模态，并且正在使用液体。

我的页面上有两种不同的模态 - summer-recipe.hbs： 1 x沙拉莫代尔 1 x冰沙莫代尔

两者都有效。

当两个模态都打开时，从summer-recipe.hbs页面打开。路线文件是routes / summer-recipes.js

有没有办法为每个模态设置特定路线。基本上我希望能够设置/具有相当于：

路由/ salads.js 路由/ 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}}

控制器/夏季recipes.js：

  showSaladsDialog: gte('newUser', 1),

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

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

Answer 1

您需要在router.js中为沙拉定义url，为其创建Route并在Route中使用模型钩子来收集必要的数据。由于你想要创建和编辑沙拉，你也应该为它创建单独的路径。

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

现在在路由中为他们使用模型钩子来创建记录（用于新路由）或者使用来自params的沙拉_id的findRecord（用于编辑路线）。

ember liquid-teather modals - 设置路线

1 个答案: