Я ранее задавал вопрос, в котором хотелпривязать коллекцию, находящуюся в контроллере, к представлению сценария спискаоднако я добавилdetails а такжеedit шаблоны и представления к моей структуре, создающие несколько дополнительных суб-маршрутов:

root.contacts.details -> /contacts/:contact_id
root.contacts.edit -> /contacts/:contact_id/edit

В моемdetails Сценарии, которые я впервые начал называтьconnectOutlets следующее

[...]
connectOutlets: function (router, contact) {
    router.get('contactController').set('contact', contact);
    router.get('applicationController').connectOutlet('contacts');
},[...]

Это изменит маршрут в навигационной панели браузера, но загрузит тот же вид, а затем я изменил.connectOutlet вcontact instead of contacts к следующему

[...]
connectOutlets: function (router, contact) {
    router.get('contactController').set('contact', contact);
    router.get('applicationController').connectOutlet('contact');
},[...]

Из-за этого мне пришлось создать новый контроллер, так как Ember не смог найти контроллер с именемcontactControllerтак что я закончил сcontactController иcontactsController и я думаю, что я нарушаю шаблон MVC, выполняя это, а также создавая дополнительный класс для поддержки возможных проблем с синхронизацией (при редактировании контакта мне нужно вручную синхронизировать с коллекцией вcontactsController). Также, когда я перехожу к/#/contacts/2/edit он загружает подробный вид, поскольку я использую то же имя в.connectOutlet('contact'), То, что я делаю, не может быть правильным. Я не хочу создавать контроллер для каждого сценария. Я уверен, что это не так, как это было сделано.

Я также попытался установить вид (в моем случаеApp.EditContactView) вместо имени ресурса вconnectOutlets но я получил сообщение о том, что могу пройти & quot;a name or a viewClass but not both& Quot; но я не проходил черезviewClass и скорее как аргументconnectOutlet.

Я также попытался установить представление или экземпляр моего представления на сам маршрут, и я либо нарушил бы мой JavaScript, либо в некоторых случаях я получаю сообщение об ошибке, в котором говорится, что & quot;App.EditContactView does not have a method CharAt& Quot ;.

С другой стороны, я немного растерялся. Я видел другие вопросы в SO и еще где, но те, которые я обнаружил, либо использовалиember-routermanager Гордоном Хэмптоном (который кажется хорошим, но я заинтересован в использовании встроенного только сейчас),Ember.StateManager или не использовать состояние / маршрут вообще. Документация еще не слишком много объясняет об этих вещах.

Question: Каков идеальный подход для решения всех сценариев CRUD сEmber.Router? I want my contactsController чтобы иметь возможность перечислить все, найти один, отредактировать один, добавить один и удалить один контакт. Прямо сейчас у меня есть одинcontactsController сfindAll и одинcontactController сfind, edit, remove, add из-за проблем с именами.

В настоящее время я не использую ember-data, поэтому меня больше интересовали бы примеры без ссылок на ember-data (сейчас я делаю "детские шаги" без какого-либо плагина).

Вот текущая версия моего роутера:

JS

App.Router = Ember.Router.extend({
    enableLogging: true,
    location: 'hash',

    root: Ember.Route.extend({
        // EVENTS
        gotoHome: Ember.Route.transitionTo('home'),
        gotoContacts: Ember.Route.transitionTo('contacts.index'),

        // STATES
        home: Ember.Route.extend({
            route: '/',
            connectOutlets: function (router, context) {
                router.get('applicationController').connectOutlet('home');
            }
        }),
        contacts: Ember.Route.extend({
            route: '/contacts',
            index: Ember.Route.extend({
                route: '/',
                contactDetails: function (router, context) {
                    var contact = context.context;
                    router.transitionTo('details', contact);
                },
                contactEdit: function (router, context) {
                    var contact = context.context;
                    router.transitionTo('edit', contact);
                },
                connectOutlets: function (router, context) {
                    router.get('contactsController').findAll();
                    router.get('applicationController').connectOutlet('contacts', router.get('contactsController').content);
                }
            }),
            details: Ember.Route.extend({
                route: '/:contact_id',
                view: App.ContactView,
                connectOutlets: function (router, contact) {
                    router.get('contactController').set('contact', contact);
                    router.get('applicationController').connectOutlet('contact');
                },
                serialize: function (router, contact) {
                    return { "contact_id": contact.get('id') }
                },
                deserialize: function (router, params) {
                    return router.get('contactController').find(params["contact_id"]);
                }
            }),
            edit: Ember.Route.extend({
                route: '/:contact_id/edit',
                viewClass: App.EditContactView,
                connectOutlets: function (router, contact) {
                    router.get('contactController').set('contact', contact);
                    router.get('applicationController').connectOutlet('contact');
                },
                serialize: function (router, contact) {
                    return { "contact_id": contact.get('id') }
                },
                deserialize: function (router, params) {
                    return router.get('contactController').find(params["contact_id"]);
                }
            })
        })
    })
});
App.initialize();

Relevant templates

<script type="text/x-handlebars" data-template-name="contact-details">
    {{#if controller.isLoaded}} 
        <img {{bindAttr src="contact.imageUrl" alt="contact.fullName" title="contact.fullName"}} width="210" height="240" /><br />
        <strong>{{contact.fullName}}</strong><br />
        <strong>{{contact.alias}}</strong>
    {{else}}
        <img src="images/l.gif" alt="" /> Loading...
    {{/if}}
</script>

<script type="text/x-handlebars" data-template-name="contact-edit">
    <strong>Edit contact</strong><br />
    First Name: <input type="text" id="txtFirstName" {{bindAttr value="contact.firstName"}}<br />
    Lasst Name: <input type="text" id="txtLastName" {{bindAttr value="contact.lastName"}}<br />
    Email: <input type="text" id="txtEmail" {{bindAttr value="contact.email"}}<br />
</script>

<script type="text/x-handlebars" data-template-name="contact-table-row">
    <tr>
        <td>
            <img {{bindAttr src="contact.imageUrl" alt="contact.fullName" title="contact.fullName"}} width="50" height="50" /><br />{{contact.fullName}}
        </td>
        <td>
            Twitter: {{#if contact.twitter}}<a {{bindAttr href="contact.twitter"}} target='_blank'>Follow on Twitter</a>{{else}}-{{/if}}<br />
        </td>
        <td>
            <a href="#" {{action contactDetails context="contact"}}>Details</a> | 
            <a href="#" {{action contactEdit context="contact"}}>Edit</a> 
        </td>
    </tr>
</script>

NoteЕсли что-то неясно, пожалуйста, спросите в разделе комментариев, и я могу отредактировать это с более подробной информацией

EditЯ добавил этот проект вGitHub даже если это не близко к тому, что я хотел бы представить в качестве учебного примера. Цель состоит в том, чтобы продвинуться вперед и создать шаблон CRUD в ближайшем будущем. В настоящее время используется MS Web API, но может скоро добавить версию Rails.