{"id":2781,"date":"2022-08-30T15:27:43","date_gmt":"2022-08-30T15:27:43","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2014\/02\/16\/how-can-i-create-a-new-record-using-ember-js-and-ember-data-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:27:43","modified_gmt":"2022-08-30T15:27:43","slug":"how-can-i-create-a-new-record-using-ember-js-and-ember-data-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/how-can-i-create-a-new-record-using-ember-js-and-ember-data-collection-of-common-programming-errors\/","title":{"rendered":"How can I create a new record using Ember.js and ember-data?-Collection of common programming errors"},"content":{"rendered":"<ul>\n<li>\n<p>With the new Ember Router introduced in pre4 I thought I&#8217;d update this answer a bit. Here&#8217;s what&#8217;s worked for me (Warning: CoffeeScript):<\/p>\n<pre><code>App.Router.map -&gt;\n    @resource \"posts\", -&gt;\n        @route \"new\"\n\nApp.PostsNewRoute = Ember.Route.extend\n    setupController: (controller, model) -&gt;\n        controller.set 'content', {}\n\nApp.PostsNewController = Ember.ObjectController.extend\n    submitForm: (event) -&gt;\n        App.Post.createRecord @content\n        @transitionToRoute 'posts.index'\n\nApp.PostsNewView = Ember.View.extend\n    controller: 'App.PostsNewController'\n<\/code><\/pre>\n<p>My template looks something like this:<\/p>\n<pre><code>    \n      \n        \n          \n            \n              {{_ \"Post\"}}\n              {{_ \"Post Title\"}}\n              {{view Ember.TextField valueBinding=\"postTitle\"}}\n              \n            \n          \n        \n      \n      \n        \n          {{_ \"Save\"}}\n          {{#linkTo \"posts.index\" class=\"btn\"}}{{_ \"Cancel\"}}{{\/linkTo}}\n        \n      \n    \n<\/code><\/pre>\n<p>I&#8217;d love to hear comments on my approach.<\/p>\n<\/li>\n<li>\n<p>I propose something along this lines, see http:\/\/jsfiddle.net\/pangratz666\/bb2wc\/:<\/p>\n<p><strong>Handlebars<\/strong>:<\/p>\n<pre><code>\n    \n        \n            <\/code><\/pre>\n<h1><code>People<\/code><\/h1>\n<pre>\n        \n        \n            {{outlet}}\n        \n        \n\n\n\n    <\/pre>\n<ul>{{#each person in controller}}<\/p>\n<li><code>{{person.firstName}} {{person.lastName}}<\/code><\/li>\n<p>{{\/each}}<\/ul>\n<pre>\n    Create New Person\n    \n    {{outlet}}\n\n\n\n    First name: {{view Ember.TextField valueBinding=\"firstName\"}} <br \/>\n    Last name: {{view Ember.TextField valueBinding=\"lastName\"}} <br \/>\n    Save\n    Cancel\n    <\/pre>\n<h3><code>Current values: {{firstName}} {{lastName}}<\/code><\/h3>\n<pre>\n\n<\/pre>\n<p><code><strong>?JavaScript<\/strong>:<\/code><\/p>\n<pre><code><code>App = Ember.Application.create();\n\nApp.Person = DS.Model.extend({\n    firstName: DS.attr('string'),\n    lastName: DS.attr('string')\n});\n\n\/\/ Note: these properties are expected to be dasherized\nApp.Person.FIXTURES = [\n    {\n    \"id\": 1,\n    \"first_name\": \"Joe\",\n    \"last_name\": \"Smith\"},\n{\n    \"id\": 2,\n    \"first_name\": \"James\",\n    \"last_name\": \"Dolan\"},\n{\n    \"id\": 3,\n    \"first_name\": \"Jim\",\n    \"last_name\": \"Carry\"}\n];\n\nApp.Store = DS.Store.extend({\n    revision: 4,\n    adapter: DS.FixtureAdapter.create()\n});\n\n\/*\n * Routing\n *\/\nApp.Router = Ember.Router.extend({\n\n    enableLogging: true,\n\n    root: Ember.Route.extend({\n        index: Ember.Route.extend({\n            route: '\/',\n            connectOutlets: function(router, people) {\n                \/\/ set the content to all available persons\n                router.get('peopleController').set('content', App.Person.find());\n                router.get(\"applicationController\").connectOutlet(\"people\");\n            },\n            index: Ember.Route.extend({\n                route: '\/'\n            }),\n            create: Ember.Route.extend({\n                route: '\/create',\n                connectOutlets: function(router, person) {\n                    \/\/ set\/clear the content for the personCreateController\n                    router.get('personCreateController').set('content', {});\n                    router.get(\"peopleController\").connectOutlet(\"personCreate\");\n                },\n\n                \/\/ as proposed in https:\/\/github.com\/emberjs\/ember.js\/pull\/1139\n                exit: function(router) {\n                    \/\/ called when we navigate away from this route: remove\n                    \/\/ the connected outlet, which is the createPerson view\n                    router.get('peopleController').set('view', null);\n                },\n\n                submitForm: function(router, event) {\n                    \/\/ get the content of the personCreateController\n                    var hash = router.getPath('personCreateController.content');\n                    \/\/ create a new person\n                    App.Person.createRecord(hash);\n                    \/\/ navigate back to the index route\n                    router.transitionTo('index');\n                },\n\n                \/\/ cancel button pressed\n                cancel: Ember.Route.transitionTo('index')\n            }),\n\n            \/\/ show the \"dialog\" for creating a new person\n            newPerson: Ember.Route.transitionTo('create')\n        })\n    })\n});\n\nApp.ApplicationController = Ember.Controller.extend();\nApp.PeopleController = Ember.ArrayController.extend();\nApp.PersonCreateController = Ember.ObjectController.extend();\n\nApp.ApplicationView = Ember.View.extend({ templateName: 'application' });\nApp.PeopleView = Ember.View.extend({ templateName: 'people' });\nApp.PersonCreateView = Ember.View.extend({ templateName: 'person_create' });\n\nApp.initialize();?\n<\/code><\/code><\/pre>\n<\/li>\n<\/ul>\n<p id=\"rop\"><small>Originally posted 2014-02-16 09:15:22. <\/small><\/p>","protected":false},"excerpt":{"rendered":"<p>With the new Ember Router introduced in pre4 I thought I&#8217;d update this answer a bit. Here&#8217;s what&#8217;s worked for me (Warning: CoffeeScript): App.Router.map -&gt; @resource &#8220;posts&#8221;, -&gt; @route &#8220;new&#8221; App.PostsNewRoute = Ember.Route.extend setupController: (controller, model) -&gt; controller.set &#8216;content&#8217;, {} App.PostsNewController = Ember.ObjectController.extend submitForm: (event) -&gt; App.Post.createRecord @content @transitionToRoute &#8216;posts.index&#8217; App.PostsNewView = Ember.View.extend controller: &#8216;App.PostsNewController&#8217; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2781","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/2781","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=2781"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/2781\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=2781"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=2781"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=2781"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}