Блог

В одном маршруте я отображаю несколько выходов, и для каждого выхода я загружаю его содержимое, используя его контроллер с content переменной. Я хотел бы показать представление загрузки для каждой розетки, но не знаю, как это сделать, поскольку для них нет маршрута загрузки (и поэтому я не могу просто создать handlebar).

У меня нет проблем с отображением представления загрузки при запуске моего приложения с помощью 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 контроллер, но это не сработало (просто записал некоторый текст, но ничего не появилось).

Спасибо,

лично я бы добавил все эти находки в хук модели и использовал маршрут загрузки по умолчанию. Что-то вроде этого (я догадался о моделях для учетных записей и контактов).

 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>
 

Итак, я просто хочу добавить, что я сделал немного по-другому, поэтому я все еще могу сохранить свои торговые точки, а не отображать представление просто так. У меня есть некоторые потребности, которые усложняют ситуацию, вот мое решение:

Маршрут:

 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>
 

И это работает идеально.