Ember.js 布局答案

【问题标题】：Ember.js LayoutEmber.js 布局
【发布时间】：2013-12-15 18:47:36
【问题描述】：

我对 ember.js 很感兴趣，想用它创建一个单页应用程序。由于应用程序的性质，我将在某个时候拥有多个“主要”布局。

用户登录应用程序后，我需要根据 ajax 调用显示用户名。我还不明白如何在 ember.js 中最好地实现它，因为它（至少对我而言）在任何视图层次结构之外。

我尝试使用渲染方法的“into”选项。

App.TestRoute = Ember.Route.extend({
  renderTemplate: function(controller, model) {
    this.render('layout');

    this.render('test',{
       into: 'layout'
    });
  },
});

我认为这也会调用布局路由并加载其模型。不幸的是，它没有这样做。

我过去用 {{yield}} 指令定义了一个布局

<div>
  <div class="container" id="header">
    {{loginUser.userName}}
  </div>

  <div class="container" id="main-content">
    {{yield}}
  </div>

  <div class="container" id="footer">
    Just some static footer
   </div>
</div>

和我的看法一样

App.TestView = Ember.View.extend({
  layoutName: 'layout'
});

渲染工作正常，但我看不到哪里可以最好地注入用户数据。理想情况下，这对于使用此布局的所有视图应该是透明的。所以我的想法是使用继承，但还没有找到可行的解决方案。

我是否完全偏离了轨道，或者这是否有意义？

更新

我把例子放在这里：http://jsfiddle.net/Efz8N/4/

【问题讨论】：

实际上，这似乎也是一个很好的解决方案stackoverflow.com/questions/19983390/…我会玩这个，看看它是否能让我到达我想去的地方。
似乎不起作用，因为再次调用了 LayoutView，而只调用了 TestView。
嘿阿特兰，你能展示一下测试路线/控制器（如果它们存在的话）
我没有为此设置任何控制器。我刚刚在 jsFiddle 中添加了一个使用索引路由的简短示例。

标签： javascript ember.js handlebars.js

【解决方案1】：

布局由使用布局支持视图的控制器支持。

http://jsfiddle.net/WHvCZ/

loginUserFullName:function(){
    return this.get('controllers.application.loginUser') || 'not in';
}.property('controllers.application.loginUser')

【讨论】：

谢谢，但是，在示例中，我仍然需要在所有使用布局的控制器中实现计算属性。有没有办法在布局部分上有这种逻辑？到目前为止，在我尝试的所有设置中，都没有调用布局控制器或视图实现。与此同时，我有一个解决方案，我将在今晚晚些时候发布。我创建了一个 mixin，并将其添加到所有使用布局的控制器中。我不太喜欢它，但它确实有效。
是的，布局就是这样，布局，逻辑都通过布局传递给项目。 mixin 是处理它的完美方式，然后你就不会重复逻辑

【解决方案2】：

这就是我现在的做法。我创建了一个可以在任何使用布局的控制器中使用的 mixin。这样我至少不必多次实现：

App.LayoutHandler = Ember.Mixin.create({
  loginUserFullName: function() {
    var name = App.get("loginUser")?App.get("loginUser"):"";

    return name;
  }.property("App.loginUser"),
});

App.IndexController = Ember.Controller.extend(App.LayoutHandler, {

});

这里是一个例子：http://jsfiddle.net/Efz8N/6/

【讨论】：