Ember.js - CRUD场景 - 从路由指定视图 [英] Ember.js - CRUD scenarios - Specifying View from within a Route

问题描述

我以前曾问过一个问题：将驻留在控制器中的集合绑定到列表场景视图，但是，我添加了详细信息和编辑模板和视图到我的结构生成一些额外的子路线：

I've asked a question previously in which I wanted to bind a collection residing in the controller to the list scenario view, however, I've added details and edit templates and views to my structure producing a couple of extra sub-routes:

root.contacts.details - > / contacts /：contact_id

root.contacts.edit - > / contacts /：contact_id / edit

在我的细节场景中，我首先开始呼叫 connectOutlets 如下

In my details scenarios I first started calling the connectOutlets as follows

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

这将改变浏览器导航栏中的路线，但它会加载相同的视图，然后我将 .connectOutlet 更改为 联系人而不是联系人

This would change the route in the browser navigation bar, but it would load the same view, then I changed the .connectOutlet to contact instead of contacts to the following

[...]
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（'接触'）。所以我在做什么是不对的。我不想为每个场景创建控制器。我确定这不是如何做的。

Because of this, I had to create a new controller as Ember couldn't find a controller named contactController, so I ended up with a contactController and a contactsController and I think I'm breaking the MVC pattern doing this, as well as creating an extra class to maintain, possible problems with syncronization (when editing a contact I'd have to manually sync with the collection in the contactsController). Also when I navigate to /#/contacts/2/edit it loads the details view since I'm using the same name in .connectOutlet('contact'). So what I'm doing can't be right. I don't want to create controller per scenario. I'm sure this is not how it's done.

我还尝试设置视图（在我的情况下 App.EditContactView ）而不是 connectOutlets 中的资源名称，但是我收到一条错误，表示我可以传递名称或视图类，但不能同时使用但是我没有通过 viewClass ，而是作为 connectOutlet 的参数。

I also tried setting the view (in my case App.EditContactView) instead of the resource name in the connectOutlets but I got an error saying I can pass "a name or a viewClass but not both" but I was not passing through viewClass and rather as an argument of connectOutlet.

我还试图将路线本身的视图或实例设置为路由，我会打破我的JavaScript，或者在某些情况下会收到错误说 App.EditContactView没有方法CharAt 。

I have also tried to set a view or an instance of my view to the route itself and I would either break my JavaScript or in some cases I'd get an error saying that "App.EditContactView does not have a method CharAt".

再一次，我有点迷失了。我在SO中看到其他问题，但是我发现的问题是使用 <$ c $由Gordon Hempton（似乎很好，但我有兴趣现在只使用内置的）c> ember-routermanager ， Ember.StateManager 或不使用状态/路由。文件没有解释这些东西太多了。

Then again, I got a little lost. I have seen other questions at SO and else where but the ones I've found were either using ember-routermanager by Gordon Hempton (which seems good, but I'm interested in using built-in only right now), Ember.StateManager or not using state/route at all. Documentation isn't explaining too much about these things yet.

问题：处理所有CRUD场景的理想方法是什么？ code> Ember.Router ？
我想要我的 contactsController 能够列出所有，找到一个，编辑一个，添加一个并删除一个联系人。现在我有一个 contactsController 与 findAll 和一个 contactController 与找到，编辑，删除，添加由于命名问题。

Question: What would be the ideal approach to deal with all CRUD scenarios with Ember.Router? I want my contactsController to be able to list all, find one, edit one, add one and delete one contact. Right now I have one contactsController with findAll and one contactController with find, edit, remove, add because of naming problems.

我目前没有使用ember数据，所以我将更加关注没有引用ember的例子-data（我现在正在做没有任何插件的婴儿步骤）。

I am currently not using ember-data so I would be more interested in examples without references to ember-data (I am doing the baby steps without any plug-in for now).

这是我当前的路由器版本：

Here's the current version of my router:

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>

注意：如果有什么不清楚，请在评论部分和我可以使用更多细节编辑这个项目

Note: If there's anything unclear, please ask in the comment section and I can edit this with more details

修改：我已将此项目添加到 GitHub ，即使我不想接受我作为学习样本的曝光。目标是在不远的将来进步，并在不久的将来创建一个CRUD模板。目前使用MS Web API，但可能会很快添加一个Rails版本。

Edit: I've added this project to GitHub even tho it's nowhere near what I'd like to expose as a learning sample. The goal is to progress on top of this and create a CRUD template in a near future. Currently using MS Web API, but might add a Rails version soon.

推荐答案

这里有一些事情，我会尝试回答他们，但如果我想念任何可以自由发表评论的话。你似乎正在重塑Ember已经为你做的很多东西。

There's a few things going on here, I'll try and answer them, but if I miss anything feel free to leave a comment. You seem to be reinventing a lot of stuff Ember already does for you.

首先，如果你想传递一个视图到 connectOutlet 方法，你需要传递一个哈希作为唯一的参数。

Firstly, if you want to pass a view to the connectOutlet method you need to pass in a hash as the one and only argument.

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

其次，有两个联系人控制器没有皱眉，实际上我会推荐它。来自 ObjectController 和 ContactsController 的单一 ContactController 继承自 ArrayController ，这意味着您可以轻松利用内置内容的优势。

Secondly, having two contact controllers is not frowned upon, in fact I'd recommend it. A singular ContactController that inherits from ObjectController and a ContactsController that inherits from ArrayController, this means you can easily take advantage of the content proxies built in.

第三，如果你添加找到和 findAll 类方法到你的模型，你会使自己的生活更容易。

Thirdly, if you add find and findAll class methods to your models you will make life much easier for yourself.

• 您不需要定义已定义的序列化/反序列化方法，默认情况下，Ember将查找具有从路由推断的名称的模型所以：contact_id将自动寻找App.Contact.find（：contact_id）。

• You won't need to define the serialize/deserialize methods you have defined, by default Ember will look for a model with the name deduced from the route so :contact_id will automatically look for App.Contact.find(:contact_id).

您还可以将索引connectOutlets更改为： router.get（'applicationController'）。connectOutlet（'contacts'，App.Contact.findAll（））

You will also be able to change your index connectOutlets to: router.get('applicationController').connectOutlet('contacts', App.Contact.findAll())

还有一个提示，目前您的细节和编辑路线几乎完全相同。我将创建一个名为公司的单一路线，然后在其中生成子详细信息并编辑视图。

One more tip, currently your details and edit routes are almost completely identical. I would create a single route called company and then make child details and edit views inside of it.

这篇关于Ember.js - CRUD场景 - 从路由指定视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！