我从找到的各种文档和示例中编译了这个示例,但我还没有找到使用路由器和 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
这将发生在:
- App.Person.find()
- App.Person.createRecord({})
- App.Store.find(App.Person)
- 其他几种方法(当我想到它们时我会更新这个列表)
问题
- 我是否使用这些工具以正确的方式创建了新记录?
- 为什么我会收到上述错误? (如果您打开 Web 检查器,在未捕获的异常上暂停并确保您位于结果( fiddle.jshell.net )框架中而不是 ,则可以看到此错误)
最佳答案
我提出了类似的建议,请参阅 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();
关于ember.js - 如何使用 Ember.js 和 ember-data 创建新记录?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11619926/