ember.js - 如何使用 Ember.js 和 ember-data 创建新记录？

Question

我从找到的各种文档和示例中编译了这个示例，但我还没有找到使用路由器和 ember-data 来简单创建新记录的完整示例，所以这就是我的做法。

示例

http://jsfiddle.net/dmazza/Hb6BQ/4/

我有一个人 (DS.Model)，有名字和姓氏。

我有一个带有索引和创建路由的路由器，其中创建表单出现在 PeopleView 的导出中。

我使用 Ember.TextField 绑定(bind)到使用 App.Person.createRecord({}) 创建的新 Person 的属性，作为 PersonCreateController 的内容。

请注意，我有意按照 @wycats 的建议为每个 socket 使用单独的 Controller :https://github.com/emberjs/ember.js/issues/1050#issuecomment-6497907

问题

我似乎一遍又一遍地遇到同样的问题。我尝试使用像 App.Person.find() 这样的方法，它会告诉我:

Uncaught TypeError: Cannot read property 'find' of undefined 

这将发生在:

1. App.Person.find()
2. App.Person.createRecord({})
3. App.Store.find(App.Person)
4. 其他几种方法(当我想到它们时我会更新这个列表)

问题

1. 我是否使用这些工具以正确的方式创建了新记录？
2. 为什么我会收到上述错误？ (如果您打开 Web 检查器，在未捕获的异常上暂停并确保您位于结果( fiddle.jshell.net )框架中而不是 ，则可以看到此错误)

Answer 1

我提出了类似的建议，请参阅 http://jsfiddle.net/pangratz666/bb2wc/ :

Handlebars :

<script type="text/x-handlebars" data-template-name="application">
    <div class='container' id='application'>
        <header>
            <h1>People</h1>
        </header>
        <article>
            {{outlet}}
        </article>
    </div>    
</script>

<script type="text/x-handlebars" data-template-name="people">
    <ul>
        {{#each person in controller}}
            <li>{{person.firstName}} {{person.lastName}}</li>
        {{/each}}
    </ul>
    <button {{action newPerson }}>Create New Person</button>
    <hr/>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="person_create">
    First name: {{view Ember.TextField valueBinding="firstName"}} <br/>
    Last name: {{view Ember.TextField valueBinding="lastName"}} <br/>
    <button {{action submitForm }}>Save</button>
    <button {{action cancel }}>Cancel</button>
    <h3>Current values: {{firstName}} {{lastName}}</h3>
</script>

​JavaScript:

App = Ember.Application.create();

App.Person = DS.Model.extend({
    firstName: DS.attr('string'),
    lastName: DS.attr('string')
});

// Note: these properties are expected to be dasherized
App.Person.FIXTURES = [
    {
    "id": 1,
    "first_name": "Joe",
    "last_name": "Smith"},
{
    "id": 2,
    "first_name": "James",
    "last_name": "Dolan"},
{
    "id": 3,
    "first_name": "Jim",
    "last_name": "Carry"}
];

App.Store = DS.Store.extend({
    revision: 4,
    adapter: DS.FixtureAdapter.create()
});

/*
 * Routing
 */
App.Router = Ember.Router.extend({

    enableLogging: true,

    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/',
            connectOutlets: function(router, people) {
                // set the content to all available persons
                router.get('peopleController').set('content', App.Person.find());
                router.get("applicationController").connectOutlet("people");
            },
            index: Ember.Route.extend({
                route: '/'
            }),
            create: Ember.Route.extend({
                route: '/create',
                connectOutlets: function(router, person) {
                    // set/clear the content for the personCreateController
                    router.get('personCreateController').set('content', {});
                    router.get("peopleController").connectOutlet("personCreate");
                },

                // as proposed in https://github.com/emberjs/ember.js/pull/1139
                exit: function(router) {
                    // called when we navigate away from this route: remove
                    // the connected outlet, which is the createPerson view
                    router.get('peopleController').set('view', null);
                },

                submitForm: function(router, event) {
                    // get the content of the personCreateController
                    var hash = router.getPath('personCreateController.content');
                    // create a new person
                    App.Person.createRecord(hash);
                    // navigate back to the index route
                    router.transitionTo('index');
                },

                // cancel button pressed
                cancel: Ember.Route.transitionTo('index')
            }),

            // show the "dialog" for creating a new person
            newPerson: Ember.Route.transitionTo('create')
        })
    })
});

App.ApplicationController = Ember.Controller.extend();
App.PeopleController = Ember.ArrayController.extend();
App.PersonCreateController = Ember.ObjectController.extend();

App.ApplicationView = Ember.View.extend({ templateName: 'application' });
App.PeopleView = Ember.View.extend({ templateName: 'people' });
App.PersonCreateView = Ember.View.extend({ templateName: 'person_create' });

App.initialize();​