2

我正在使用一个相当简单的 Emberjs 应用程序。但是，我很难弄清楚一件。

这是一个简单的客户端演示应用程序。我正在制作不同的页面，并在用户访问每个页面时弹出一个模式对话框。我正在使用夹具适配器，并且每个页面的模式内容都指定为夹具。

我有我导航到的页面，有些有我传入的 id。我为每个页面定义了我的路线。

现在我已经完成了所有设置，我想通过 url 传递 id 来将模式添加到页面中。不过，我似乎不必在每个资源内指定模式路线。

例如：

这是我必须开始的代码：

    this.resource('test', {path: '/test'}, function() {
        this.resource('question', { path: '/:test_id'});
    });
    this.resource('home', {path: '/home'});

当我想添加模态时，似乎我需要做这样的事情，但是我必须将模态添加为我拥有的每个资源的路由似乎并不正确。然后我也会有大量的模板/控制器等。

    this.resource('test', {path: '/test'}, function() {
        this.resource('question', { path: '/:test_id'}, function() {
            this.route('modal', {path: '/modal/:modal_id'});
        });
    });
    this.resource('home', {path: '/home'}, function() {
        this.route('modal', {path: '/modal/:modal_id'});
    });

这可能是因为我是 Emberjs 的新手，但我还没有看到任何东西可以为页面上不相关的动态内容提供替代方案。

任何帮助表示赞赏。

4

2 回答 2

2

您可以在应用程序路由中设置此操作

App.ApplicationRoute = App.Route.extend({
  actions: {
    showModal: function() {
      this.render('modal', {
        outlet: 'modal',
        into: 'application'
      });
    },
    hideModal: function() {
      this.disconnectOutlet({
        outlet: 'modal',
        parentView: 'application'
      });
    }
  }
});

然后您可以将查询参数与其他路由上的 setupController 结合使用

this.resource('test', {path: '/test'}, function() {
    this.resource('question', { path: '/:test_id',queryParams: ['modalId']});
});

问题路线应该是这样的

App.QuestionRoute = App.Route.extend({
    setupController:function(controller,model,queryParams){
        controller.set('model',model);
        if(queryParams.modalId){
            var modalModel;
            //Set your modal model, here you have access to the store, etc
            this.controllerFor('modal').set('model', modalModel);
            this.send('showModal')
        }
        else{
            this.controllerFor('modal').set('model', null);
            this.send('hideModal');
        }
    }
});

注意：queryparams 是一个可选功能，您应该激活 http://emberjs.com/guides/configuring-ember/feature-flags/

您可以使用 link-to 助手和 transitionTo...

链接到示例，用于打开 id 为 1 的模式

{{#linkTo modelId=1}}modal 1{{/linkTo}}

用于关闭

{{#linkTo modelId=false}}Close modal{{/linkTo}}

有关查询参数的更多信息https://github.com/emberjs/ember.js/pull/3182

于 2013-11-06T10:24:11.470 回答
0

您可以通过 URL 传递内容并在您的路由中使用它。在您的路线中，有一个模型钩子，您应该有权访问将包含所有 URL 动态段的 params 对象。

您可以将其设为示例中的嵌套路由，或者您可以将其设置为具有资源的同一级别。这意味着您不必重复它。

不确定这是否能回答问题。感觉我可能遗漏了一些信息。

你在显示什么模式？我通常会显示与外部资源相关的内容，因此我个人避免使用全局“模态”路线。在这种情况下，我只是在不同的插座中呈现模态，并有一个封装了一些模态功能的路由/视图，但我不确定这是否与您需要的相同。

于 2013-11-06T04:19:09.040 回答