我之前问过一个问题，我想在其中 bind a collection residing in the controller to the list scenario view , 然而，我已经添加了 details 和 edit 模板和 View 到我的结构中，产生了几个额外的子路由:

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');
},[...]

这会改变浏览器导航栏中的路线，但它会加载相同的 View ，然后我将 .connectOutlet 更改为 contact 而不是 < em="">联系人以下

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

因此，我不得不创建一个新的 Controller ，因为 Ember 找不到名为 contactController 的 Controller ，所以我最终得到了一个 contactController 和一个 contactsController 并且我认为这样做会破坏 MVC 模式，同时创建一个额外的类来维护同步化可能出现的问题(在编辑联系人时我必须手动与集合中的集契约(Contract)步联系人 Controller )。此外，当我导航到 /#/contacts/2/edit 时，它会加载详细信息 View ，因为我在 .connectOutlet('contact') 中使用了相同的名称。所以我所做的不可能是对的。我不想为每个场景创建 Controller 。我敢肯定这不是它的完成方式。

我还尝试在 connectOutlets 中设置 View (在我的例子中是 App.EditContactView)而不是资源名称，但我收到一条错误消息说我可以通过“< em="">一个名称或一个 viewClass，但不是两者”，但我没有通过 viewClass 而是作为 connectOutlet 的参数传递。

我还尝试将 View 或我的 View 的实例设置为路由本身，但我会破坏我的 JavaScript，或者在某些情况下我会收到一条错误消息，提示“App.EditContactView 没有一个方法 CharAt”。

话又说回来，我有点迷路了。我在 SO 和其他地方看到了其他问题，但我发现的问题要么使用 ember-routermanager由 Gordon Hempton(这看起来不错，但我现在只对使用内置感兴趣)，Ember.StateManager 或根本不使用状态/路由。文档还没有对这些事情进行过多解释。

问题:使用 Ember.Router 处理所有 CRUD 场景的理想方法是什么？ 我希望我的 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();

相关模板

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

注意:如果有任何不清楚的地方，请在评论部分提问，我可以编辑更多细节

编辑:我已将此项目添加到 GitHub即使它远不及我想作为学习样本公开的内容。目标是在此基础上取得进展，并在不久的将来创建一个 CRUD 模板。目前使用 MS Web API，但可能很快会添加 Rails 版本。

最佳答案

这里发生了一些事情，我会尽力回答，但如果我遗漏了什么，请随时发表评论。您似乎正在重新发明 Ember 已经为您做的很多事情。

首先，如果您想将 View 传递给 connectOutlet 方法，您需要将哈希作为唯一参数传递。

router.get('applicationController').connectOutlet({
  viewClass: App.EditContactView,
  controller: router.get('contactsController'),
  context: context
})

其次，拥有两个接触式 Controller 并不令人讨厌，事实上我会推荐它。一个继承自 ObjectController 的单个 ContactController 和一个继承自 ArrayController 的 ContactsController，这意味着您可以轻松利用内置的内容代理。

第三，如果您将 find 和 findAll 类方法添加到您的模型中，您将让自己的生活变得更加轻松。

• 您不需要定义您定义的序列化/反序列化方法，默认情况下，Ember 将查找具有从路由推导出的名称的模型，因此 :contact_id 将自动查找 App.Contact.find( :contact_id).

• 您还可以将索引 connectOutlets 更改为:router.get('applicationController').connectOutlet('contacts', App.Contact.findAll())

还有一个提示，目前你的详细信息和编辑路线几乎完全一致。我会创建一个名为 company 的路由，然后在其中创建子详细信息和编辑 View 。

关于javascript - Ember.js - CRUD 场景 - 从路由中指定 View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11377498/