Ember.js - несколько компонентов на странице

Question

Я пытаюсь создать приложение Ember, и я сталкиваюсь с некоторыми трудностями.

У меня есть индексный маршрут, который я хочу, чтобы сделать следующую страницу:

+--------------------------+ 
| Welcome, foo@bar.com | 
+--------------------------+ 
|       | 
|  New Posts   | 
|  ---------   | 
|   *foo   | 
|   *bar   | 
|   *baz   | 
|       | 
+--------------------------+ 

Так У меня есть Account модель, и модель Post. (Которые не имеют какие-либо связанные с ней областей)

У меня концептуальные трудности со следующим:

Эмбер маршруты имеют model метод, который возвращает модель для маршрута. Но что, если я хочу, чтобы несколько моделей были связаны с моим маршрутом? В этом случае у меня есть Account и Post. Как мне их сделать и доступны на моей странице?

Одна вещь, которую я пробовал, использует setupController и вручную устанавливает account и posts на контроллер, чтобы к ним можно было получить доступ к шаблону. Но если я могу это сделать, в чем смысл/значение метода model !?

Почему Ember хочет связать маршрут только с одной моделью?

Цените любой совет,

Спасибо, Daniel

Answer 1

Одна вещь, которую я попытался это с помощью setupController и ручной настройки учетной записи и сообщения на контроллере, чтобы они могли быть доступны в шаблоне.

Что вы делаете правильно, это то, для чего нужен крюк setupController.

Но если я могу это сделать, то в чем смысл/значение метода модели !? Почему Ember хочет связать маршрут только с одной моделью?

В RC3, предотвращая поведение по умолчанию, было невозможно. В RC4 реализация хука setupController предотвращает случайное поведение по умолчанию. Это потенциально опасное изменение для перехода разработчика на более новые версии.

Также обратите внимание, что если ваш маршрут реализует setupController крючок, и вы хотите, чтобы сохранить поведение по умолчанию (model из также вызывается) убедитесь, что вы звоните this._super() внутри setupController крючка. Вы можете прочитать больше here в объявлении блога.

Надеюсь, это поможет.

Answer 2

model Использование обратного вызова имеет ряд преимуществ:

1. Он автоматически генерировать модели обратного вызова при определении маршрутизатора.
2. В шаблоне, когда вы используете link-to "someRoute" model, при нажатии этой ссылки и переходе на другой маршрут маршрут будет использовать модель, которую вы передаете для своей модели (без вызова model callback для получения данных).

См http://emberjs.com/api/classes/Ember.Route.html#method_model

Но самое большое преимущество, я думаю, это поддержка обещание.

Маршрут использует обратный вызов model для получения необходимых ему данных, затем в setupController он передает данные во второй аргумент.

Обратите внимание, что я имею в виду setupController получает данные от model callback. Если обратный вызов model возвращает обещание, маршрут будет ждать, пока это обещание не будет устранено, а затем получите данные от обещания. Если обещание обрабатывается, setupController не вызывается, и шаблон не отображается.

App.PostsRoute = Em.Route.extend({ 
    model: function() { 
    // The server response an array of posts like [{name: 'foo'}, {name: 'bar'}, {name: 'baz'}] 
    return $.get('/api/posts.json'); 
    }, 

    setupController: function(controller, model) { 
    console.log(model); // it's array, not promise object 
    controller.set('model', model); 
    } 
}); 

Когда вы можете использовать setupController сделать то же самое, это так:

App.PostsRoute = Em.Route.extend({ 
    setupController: function(controller, model) { 
    $.get('/api/posts.json').then(function(data) { 
     controller.set('model', data); 
    }); 
    } 
}); 

НО, setupController не поддерживает обещание, это означает, что если вы получаете данные с сервера в setupController, Ember будет отображать шаблон перед подготовкой данных. Во многих случаях это не то, что мы хотим.

НО, model кажется не лучшим местом для получения нескольких данных с сервера. Вы можете сделать это, используя Ember.RSVP.all с несколькими обещаниями. но вам также необходимо рассмотреть link-to. Я не уверен, что является наилучшей практикой для получения нескольких данных в маршруте и ждать их подготовки до создания шаблона. Если у кого есть хорошее решение, скажите, пожалуйста!

Для вашей ситуации, я думаю, вы можете использовать другой маршрут для этого. В конце концов, я думаю, что что-то вроде «Welcome, foo@example.com» является верхней панелью для всех страниц, не так ли? Затем вы можете поместить его в ApplicationRoute и отобразить информацию об учетной записи в шаблоне application.hbs.