Question

我正在构建一个移动优先应用程序，因此需要非常经济的屏幕空间，并且有时候在资源和其中一个子路由之间导航我想要能够让子路由取代{{outlet}}，但同时删除父视图/模板的DOM元素。所以，如果我的路线设置为：

Router.map(function() {
    this.resource('workouts', function() {
        this.route('workout', { path: '/:id' }, function() {
            this.resource('exercises', function() {
                this.route('new');
                this.route('exercise', { path: '/:id' });   
            });
        });
    }   
}

让我们说我想通过查看特定的锻炼（“1234”）开始我的浏览，其中列出了锻炼中进行的所有锻炼，但没有详细信息。我会导航到：

http://best.app.ever/workouts/1234

当我点击某个特定的练习时，我想在以下位置查看该练习的详细信息（“123”）：

http://best.app.ever/workouts/1234/exercises/123

这没有问题，但是 - 正如可能预期的那样 - 练习的详细信息将插入到 workout.hbs 模板中{{outlet}}的DOM中。我正在寻找的是一种优雅而简单的方法来替换父模板DOM条目（至少对于较小的媒体类型）。

额外的信用解决方案，允许在状态之间进行某种微妙的动画，以帮助用户理解转换。

顺便说一下，我有一个有效的解决方案，我确信自己更像是一个黑客，而不是在Ember做这个的“正确的方式”...它是这样的：

在子视图（又名 exercise / exercise ）中，我重载了默认视图并添加以下内容：

export default Ember.View.extend({
    hideMaster: function() {
        var master = this.$().parents('body').find('#master-screen');
        master.hide();
    }.on('didInsertElement')
});

这取决于具有DOM元素“master-screen”的“master”（在本例中为 workout.hbs 模板），该元素包含我想要隐藏的DOM部分。这种类型的解决方案也可以轻松地为动画状态提供帮助，但我怀疑有一些聪明的头脑有更多类似Ember的方式来做这件事......如果是这样，请大声说出来。：）

Answer 1

我很想使用exercises/index模板来显示练习列表。这样，当您转换为exercises/exercise时，它会自动换出。然后你可以使用液体火来增加一个优雅的过渡。

但是，该解决方案不允许您在桌面浏览器上保留完整的练习列表。对于这种情况，我认为正确的方法是设计一个专用于适当响应行为的组件。它会对您定义的视图执行类似的工作，但是当您在未来的路上查看模板时，它会更加明确。

哑示例：

exercises.hbs：

{{#x-responsive-view}}
  {{#x-parent-content}}
    <ul>
      {{#each exercise in exercises}}
        <li>...</li>
      {{/each}}
    </ul>
  {{/x-parent-content}}
  {{#x-child-content}}
    {{outlet}}
  {{/x-child-content}}
{{/x-responsive-view}}

如果我们在移动电话上，则{p> x-responsive-view会隐藏x-parent-content并且x-child-content包含某些内容。

在主/细节模式中隐藏父视图

1 个答案: