私は EmberJS を初めて使用し、コードの何が問題なのかわかりません。「ミッシングリンク」を見つけることを望んでいるさまざまなサンプルプロジェクトを読んで比較したので、これにもう一度目を向けていただければ幸いです。
私は使っている:
- ハンドルバー.js 1.0.0-rc.3
- ember-latest.js (AWS 上)
- ember-data-latest.js (AWS 上)
ウェブサイトにあるものでエラーが発生し続けるため、最先端です。
index.html :
<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="items">
<h2>Total entries: {{length}}</h2>
{{#if length}}
<ul>
{{#each item in controller}}
<li>{{item.title}}</li>
{{/each}}
</ul>
{{/if}}
</script>
app.js :
window.App = Ember.Application.create({
LOG_TRANSITIONS: true
});
// Model
App.Store = DS.Store.extend({
revision: 12,
adapter: DS.RESTAdapter.extend({
bulkCommit: false,
url: '/api'
})
});
App.Item = DS.Model.extend({
id: DS.attr('number'),
title: DS.attr('string')
});
// Router
App.Router.map(function () {
this.resource('items', function () {
this.resource('item', { path: ':item_id' });
});
});
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('items');
}
});
App.ApplicationRoute = Ember.Route.extend({
setupController: function() {
this.controllerFor('item').set('model', App.Item.find());
}
});
App.ItemsRoute = Ember.Route.extend({
model: function () {
return App.Item.find();
}
});
// Controller
App.ItemsController = Ember.ArrayController.extend({
sortProperties: ['title']
});
App.ItemController = Ember.ObjectController.extend({
isEditing: false,
editItem: function () {
this.set('isEditing', true);
}
});
ロード時に、XHR リクエストが /api/items に対して行われ、次のように返されます。
{"items":
[
{
"id":"518c7ceeef56038b77000000",
"title":"Test 1"
},
{
"id":"518c7ceeef56038b77000001",
"title":"Test 2"
}
]
}
データは取得されていますが、どういうわけか、ユーザーには表示されません!
いくつかの指針をいただければ幸いです。ありがとう!