我以前有工作Ember.StateManager
,现在我正在做一些测试之前,我终于切换到Ember.Router
,但我不理解如何正确地从驻留在我的控制器集合绑定我的观点的数据。
我有一个非常简单的测试结构Ember.Router
这是工作的罚款导航明智的,但是当涉及到数据绑定它不按预期工作,我承认我现在迷路了。 至于我的数据,我有一个简单的ASP.NET MVC4的Web API运行的是工作的罚款REST服务(我曾与小提琴手测试,这一切都很好)。 在SQL存储与EF4。*有没有问题。
对于客户端应用程序,在我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>
作为测试,我也尝试过手动的populat content
在我的控制器像下面集合,但同样,当我浏览到这条路线是空的:
App.ContactController = Ember.ArrayController.extend({
content: [],
init: function() {
this._super();
this.pushObject(
App.ContactModel.create({ ... })
);
}
})
对了,如果你设法读取到现在为止,我的问题是:如何收集正确绑定使用Ember.Router一个看法?
我已经看到了大量的实例,以及在这样其他的问题,我还没有看到任何东西,我还没有工作(随时与结合点出其他样品)
谢谢