EmberJS 从控制器加载视图而不是路由答案

【问题标题】：EmberJS loading view from controller not routeEmberJS 从控制器加载视图而不是路由
【发布时间】：2014-06-25 19:06:08
【问题描述】：

在一个路由中，我渲染多个出口，对于每个出口，我使用带有content 变量的控制器加载其内容。我想为每个插座显示一个加载视图，但不知道怎么做，因为它们没有加载路径（所以我不能只创建一个车把）。

当我的应用程序启动时，使用loading 车把显示加载视图没有问题。但是对于我的网点，我既没有路由也没有资源，因此在检查 Ember 控制台时没有可用的加载路径或加载模板。

我需要找到一个技巧，以便在获取 content 时在我的插座中显示加载视图。

有什么想法吗？

我插入插座的路线：

App.ProfileRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render(); // default behavior, renders the default template

        // loads documents outlet
        this.render('documents', {
            into: 'profile',
            outlet: 'documents',
            controller: 'documents'
        });

        // load other outlets after
    }
});

相关车把：

<script type="text/x-handlebars" data-template-name="profile">
  <div id="profile-sections">
    {{outlet documents}}
    {{outlet accounts}}
    {{outlet contacts}}
  </div>
</script>

控制器：

App.DocumentsController = Ember.ArrayController.extend({
    itemController: 'document',

    content: function () {
        return this.store.findAll('document');
    }.property()
});

然后，在documents.hbs 模板中，我只是遍历文档，将它们链接到项目控制器，并拥有我的逻辑。就这样。我尝试将loading 函数添加到控制器的actions 中，但它不起作用（只是记录了一些文本但没有显示任何内容）。

谢谢，

【问题讨论】：

标签： ember.js ember-data

【解决方案1】：

我个人会将所有这些发现添加到模型挂钩中，并使用默认加载路线。像这样的东西（我猜的是帐户和联系人的模型）。

App.ProfileRoute = Ember.Route.extend({
  model: function(){
    return Ember.RSVP.hash({
      documents: this.store.find('document'),
      accounts: this.store.find('account'),
      contacts: this.store.find('contact')
    });
  }
});

然后在你的模板中使用render

<script type="text/x-handlebars" data-template-name="profile">
  <div id="profile-sections">
    {{render 'documents' documents}}
    {{render 'accounts' accounts}}
    {{render 'contacts' contacts}}
  </div>
</script>

【讨论】：

效果很好，谢谢！唯一的缺点是我想为我的每个部分（它们是可折叠部分）提供一个加载视图，这里是一个通用的，用于文档、联系人等。但我认为这就足够了，只需要找到加载时正确的消息和良好的用户界面，现在应该足够了:)

【解决方案2】：

所以我只想补充一点，我做了一些不同的事情，所以我仍然可以保留我的插座，而不是像那样渲染视图。我有一些使事情变得复杂的需求，这里是我的解决方案：

路线：

App.ProfileRoute = Ember.Route.extend({
    model: function(){
        return Ember.RSVP.hash({
            accounts: this.store.findAll('account'),
            documents: this.store.findAll('document'),
            contacts: this.store.findAll('contact')
        });
    },

    setupController: function(controller, model) {
        this.controllerFor('accounts').set('model', model.accounts);
        this.controllerFor('documents').set('model', model.documents);
        this.controllerFor('contacts').set('model', model.contacts);
    },

    renderTemplate: function() {
        this.render(); // default behavior, renders the default template

        // loads accounts outlet
        this.render('accounts', {
            into: 'profile',
            outlet: 'accounts',
            controller: 'accounts'
        });

        // loads documents outlet
        this.render('documents', {
            into: 'profile',
            outlet: 'documents',
            controller: 'documents'
        });

        // loads contacts outlet
        this.render('contacts', {
            into: 'profile',
            outlet: 'contacts',
            controller: 'contacts'
        });
    }
});

然后在模板中：

<script type="text/x-handlebars" data-template-name="profile">
  <div id="profile-sections">
    {{outlet documents}}
    {{outlet accounts}}
    {{outlet contacts}}
  </div>
</script>

还有易于装载的车把：

<script type="text/x-handlebars" data-template-name="profile/loading">
  <div id="profile-loading">
    My loading spinner and text
  </div>
</script>

而且效果很好。

【讨论】：