He hecho una pregunta previamente en la que queríavincular una colección que reside en el controlador a la vista de escenario de lista, sin embargo, he añadidodetalles yeditar Plantillas y vistas a mi estructura produciendo un par de sub-rutas adicionales:

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

En midetails escenarios que empecé a llamar elconnectOutlets como sigue

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

Esto cambiaría la ruta en la barra de navegación del navegador, pero cargaría la misma vista, luego cambié la.connectOutlet acontacto en lugar decontactos a lo siguiente

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

Debido a esto, tuve que crear un nuevo controlador ya que Ember no pudo encontrar un controlador llamadocontactController, así que terminé con unacontactController y uncontactsController y creo que estoy rompiendo el patrón MVC haciendo esto, además de crear una clase adicional para mantener, posibles problemas con la sincronización (al editar un contacto, tendría que sincronizar manualmente con la colección en elcontactsController). También cuando navego a/#/contacts/2/edit carga la vista de detalles ya que estoy usando el mismo nombre en.connectOutlet('contact'). Entonces, lo que estoy haciendo no puede estar bien. No quiero crear controlador por escenario. Estoy seguro de que no es así como se hace.

También intenté configurar la vista (en mi casoApp.EditContactView) en lugar del nombre del recurso en elconnectOutlets pero tengo un error diciendo que puedo pasar "un nombre o un viewClass pero no ambos"pero no estaba pasando porviewClass y más bien como un argumento deconnectOutlet.

También he intentado establecer una vista o una instancia de mi vista a la ruta en sí misma y o bien rompería mi JavaScript o, en algunos casos, obtendría un error al decir que "App.EditContactView no tiene un método CharAt".

Por otra parte, me perdí un poco. He visto otras preguntas en SO y en otras partes, pero las que he encontrado estaban usandoember-routermanager por Gordon Hempton (lo que parece bueno, pero estoy interesado en usarlo solo en este momento),Ember.StateManager o no usar estado / ruta en absoluto. La documentación no está explicando mucho sobre estas cosas todavía.

Pregunta: ¿Cuál sería el enfoque ideal para tratar todos los escenarios de CRUD conEmber.Router? Quiero micontactsController para poder enumerar todos, buscar uno, editar uno, agregar uno y eliminar un contacto. Ahora mismo tengo unocontactsController confindAll y unocontactController confind, edit, remove, add debido a problemas de nombres

Actualmente no estoy usando datos de brasas, así que estaría más interesado en los ejemplos sin referencias a los datos de brasas (estoy haciendo los pasos de bebé sin ningún complemento por ahora).

Aquí está la versión actual de mi enrutador:

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();

Plantillas relevantes

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

Nota: Si hay algo que no está claro, pregunte en la sección de comentarios y puedo editarlo con más detalles.

Editar: He agregado este proyecto aGitHub aunque no está ni cerca de lo que me gustaría exponer como una muestra de aprendizaje. El objetivo es avanzar sobre esto y crear una plantilla de CRUD en un futuro próximo. Actualmente utiliza la API web de MS, pero podría agregar una versión de Rails pronto.