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

Question

我已经从我找到的各种文档和示例编译了这个示例，但是我还没有找到使用Router和ember-data来创建新记录的完整示例，所以这是我的重点。

的实施例

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

我有一个firstName和lastName的人（DS.Model）。

我有一个路由器与索引和创建路径，其中创建窗体出现在PeopleView的出口。

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

请注意，我故意使用每个插座独立的控制器所推荐的@wycats这里：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

随着pre4中推出的新Ember路由器，我想我会更新这个答案了一下。下面是对我工作（警告：CoffeeScript的）：

App.Router.map -> 
    @resource "posts", -> 
     @route "new" 

App.PostsNewRoute = Ember.Route.extend 
    setupController: (controller, model) -> 
     controller.set 'content', {} 

App.PostsNewController = Ember.ObjectController.extend 
    submitForm: (event) -> 
     App.Post.createRecord @content 
     @transitionToRoute 'posts.index' 

App.PostsNewView = Ember.View.extend 
    controller: 'App.PostsNewController' 

我的模板看起来是这样的：

<script type="text/x-handlebars" data-template-name="posts/new"> 
     <div class="row"> 
     <div class="span12"> 
      <form class="create-post"> 
      <fieldset> 
       <legend>{{_ "Post"}}</legend> 
       <label>{{_ "Post Title"}}</label> 
       {{view Ember.TextField valueBinding="postTitle"}} 
       <!-- etc. etc. --> 
      </fieldset> 
      </form> 
     </div> 
     </div> 
     <div class="row"> 
     <div class="span12 push-right"> 
      <a class="btn btn-primary" {{action "submitForm"}}>{{_ "Save"}}</a> 
      {{#linkTo "posts.index" class="btn"}}{{_ "Cancel"}}{{/linkTo}} 
     </div> 
     </div> 
    </script> 

我很想听听你对我的做法的意见。

Answer 2

我建议沿着这条线，看到http://jsfiddle.net/pangratz666/bb2wc/：

把手：

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