#ember.js #ember-data
#ember.js #ember-данные
Вопрос:
В одном маршруте я отображаю несколько выходов, и для каждого выхода я загружаю его содержимое, используя его контроллер с 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
контроллер, но это не сработало (просто записал некоторый текст, но ничего не появилось).
Спасибо,
Ответ №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>
Комментарии:
1. Отлично работает, спасибо! Единственным недостатком является то, что я хотел иметь представление загрузки для каждого из моих разделов (это разборные разделы), и здесь это одно общее, для документов, контактов и т. Д. Но я думаю, этого будет достаточно, просто нужно найти правильное сообщение и хороший пользовательский интерфейс при загрузке, и этого должно быть достаточно на данный момент 🙂
Ответ №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>
И это работает идеально.