以前は で作業していましたが、Ember.StateManager最終的に に切り替える前にいくつかのテストを行っていEmber.Routerますが、コントローラーにあるコレクションからビュー データを適切にバインドする方法を理解できていません。
私は非常に単純なテスト構造を持っており、ナビゲーションEmber.Routerに関してはうまく機能していますが、データ バインディングに関しては期待どおりに機能していません。私のデータに関しては、正常に動作している REST サービスを実行する単純な ASP.NET MVC4 Web API があります (Fiddler でテストしましたが、すべて問題ありません)。EF4.* を使用して SQL に保存しても、問題はありません。
クライアントアプリに関しては、contacts.indexルートでバインドしようとしましたがconnectOutlets(別の方法でこれを行う必要がありますか?)、ビューがバインドされていないため、コードが正しく機能していないようです。
ルートのconnectOutlets方法で、私が以前に試したこと：contacts.index
1
router.get('applicationController').connectOutlet('contact');
2
router.get('applicationController').connectOutlet(
'contact',
router.get('contactController').findAll()
);
私もenterメソッドを使用しようとしました
this.setPath('view.contacts', router.get('contactController').content);
そして、次のようにビューに直接バインドしようとしました:
App.ContactView = Ember.View.extend({
templateName: 'contact-table'
contactsBinding: 'App.ContactController.content'
});
私のコードの現在のバージョンは次のとおりです。
var App = null;
$(function () {
App = Ember.Application.create();
App.ApplicationController = ...
App.ApplicationView = ...
App.HomeController = ...
App.HomeView = ...
App.NavbarController = ...
App.NavbarView = ...
App.ContactModel = Ember.Object.extend({
id: null,
firstName: null,
lastName: null,
email: null,
fullName: function () {
return '%@ %@'.fmt(this.firstName, this.lastName)
}.property('firstName', 'lastName')
});
App.ContactController = Ember.ArrayController.extend({
content: [],
resourceUrl: '/api/contact/%@',
isLoaded: null,
findAll: function () {
_self = this;
$.ajax({
url: this.resourceUrl.fmt(''),
type: 'GET',
contentType: 'application/json; charset=utf-8',
success: function (data) {
$(data).each(function () {
_self.pushObject(App.ContactModel.create({
id: this.Id,
firstName: this.FirstName,
lastNaem: this.LastName,
email: this.Email
}));
});
alert(_self.get('content').length);
// this alerts 6 which is the same number of
// records in my database, and if I inspect
// the content collection in chrome, I see my data
// that means the problem is not the ajax call
},
error: function (xhr, text, error) {
alert(text);
}
});
},
find: function (id) {
// GET implementation
},
update: function (id, contact) {
// PUT implementation
},
add: function (contact) {
// POST implementation
},
remove: function(id) {
// DELETE implementation
}
});
App.ContactView = Ember.View.extend({
templateName: 'contact-table'
});
App.ContactListItemView = Ember.View.extend({
templateName: 'contact-table-row'
});
App.Router = Ember.Router.extend({
enableLogging: true,
location: 'hash',
root: Ember.Route.extend({
// actions
gotoHome: Ember.Route.transitionTo('home'),
gotoContacts: Ember.Route.transitionTo('contacts.index'),
// routes
home: Ember.Route.extend({
route: '/',
connectOutlets: function (router, context) {
router.get('applicationController').connectOutlet('home');
}
}),
contacts: Ember.Route.extend({
route: '/contacts',
index: Ember.Route.extend({
_self: this,
route: '/',
connectOutlets: function (router, context) {
router.get('contactController').findAll();
router.get('applicationController').connectOutlet('contact');
router.get('contactView').set('contacts', router.get('contactController').content);
// if I inspect the content collection here, it's empty, ALWAYS
// but if I access the same route, the controller will alert
// the number of items in my content collection
}
})
})
})
});
App.initialize();
});
関連するテンプレートは次のとおりです。
<script type="text/x-handlebars" data-template-name="contact-table">
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
{{#if contacts}}
{{#each contact in contacts}}
{{view App.ContactListItemView contactBinding="contact"}}
{{/each}}
{{else}}
<tr>
<td colspan="2">
You have no contacts <br />
:(
<td>
</tr>
{{/if}}
</tbody>
</table>
</script>
<script type="text/x-handlebars" data-template-name="contact-table-row">
<tr>
<td>
{{contact.fullName}}
</td>
<td>
e-mail: {{contact.email}}
</td>
</tr>
</script>
テストとして、次のようにコントローラーにコレクションを手動で入力しようとしましたcontentが、そのルートに移動したときも空でした:
App.ContactController = Ember.ArrayController.extend({
content: [],
init: function() {
this._super();
this.pushObject(
App.ContactModel.create({ ... })
);
}
})
そうですね、ここまで読んでいただけたなら、私の質問は次のとおりです。Ember.Router を使用してコレクションをビューに適切にバインドする方法は?
SO の他の質問と同様に、多くの例を見てきましたが、まだうまくいくものは何も見ていません ( binding を使用した他のサンプルを自由に指摘してください)
ありがとうございました