Question

在一个路线中，我渲染了多个出口，而foreach出口我使用带有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中，但它没有工作（只记录了一些文本但没有显示）。

谢谢，

Answer 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>

Answer 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>

它完美无缺。

EmberJS从控制器加载视图而不是路径

2 个答案: