Ember.js - 如何使用 Ember.Router 将集合正确绑定到视图? [英] Ember.js - How to properly bind a collection to a view using Ember.Router?
问题描述
我以前使用 Ember.StateManager，现在我正在做一些测试，然后才最终切换到 Ember.Router，但我不明白如何从驻留在我的控制器中的集合中正确绑定我的视图数据.
I was previously working with Ember.StateManager and now I'm doing some tests before I finally switch to Ember.Router, but I'm failing to understand how to properly bind my view data from the collection residing in my controller.
我有一个带有 Ember.Router 的非常简单的测试结构，它在 导航方面 运行良好，但是当涉及到数据绑定时，它没有按预期工作，并且我承认我现在迷路了.至于我的数据，我有一个简单的 ASP.NET MVC4 Web API 运行 REST 服务，它运行良好(我已经用 Fiddler 测试过，一切都很好).使用 EF4.* 存储在 SQL 中，没有问题.
I have a very simple testing structure with Ember.Router which is working fine navigation-wise, but when it comes to data binding it's not working as expected, and I confess I'm lost now. As for my data, I have a simple ASP.NET MVC4 Web API running a REST service which is working fine (I have tested with Fiddler and it's all good). Storing in SQL with EF4.* and no problems there.
至于客户端应用程序，在我的 contacts.index 路由中，我尝试将其绑定到 connectOutlets(我应该以不同的方法执行此操作吗?)，但我的代码似乎无法正常工作，因为我的视图从未被绑定.
As for the client app, in my contacts.index route, I tried binding it in the connectOutlets (should I be doing this in a different method?), but my code doesn't seem to be working correctly since my view is never bound.
我之前尝试过的，在contacts.index路由的connectOutlets方法中:
What I have tried before, in the connectOutlets method of contacts.index route:
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);
并且我尝试直接在视图中绑定它，例如:
And I have tried to bind it directly in the view like:
App.ContactView = Ember.View.extend({
templateName: 'contact-table'
contactsBinding: 'App.ContactController.content'
});
这是我的代码的当前版本:
Here's the current version of my code:
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 集合，如下所示，但同样，当我导航到该路由时它是空的:
As a test, I've also tried manually populat the content collection in my controller like the following, but again, it was empty when I navigated to that route:
App.ContactController = Ember.ArrayController.extend({
content: [],
init: function() {
this._super();
this.pushObject(
App.ContactModel.create({ ... })
);
}
})
好吧，如果你能读到现在，这是我的问题:如何使用 Ember.Router 将集合正确绑定到视图?
Right, if you manage to read until now, here's my question: How to properly bind a collection to a view using Ember.Router?
我已经看到了许多示例，以及 SO 中的其他问题，但我还没有看到任何对我有用的东西(请随时指出其他具有约束力的示例)
I have seen a number of examples, as well as other questions in SO, and I haven't seen anything that works for me yet (feel free to point out other samples with binding)
谢谢
推荐答案
绑定不起作用，因为数组正在发生变化，但属性本身并没有改变".https://stackoverflow.com/a/10355003/603636
The binding doesn't work because "the array is mutating, but the property itself is not changing". https://stackoverflow.com/a/10355003/603636
使用 App.initialize 和 Ember.Router，视图和控制器现在可以自动连接.几乎没有理由手动将视图中的联系人绑定到控制器的内容，因为您已经可以访问它了.
Using App.initialize and Ember.Router, views and controllers are now being automagically connected. There is very little reason to manually bind contacts in your view to the controller's content as you already have access to it.
更改您的视图模板以包括:
Change your view's template to include:
{{#if controller.isLoaded}} // set this true in your ajax success function
{{#each contact in controller}}
{{view App.ContactListItemView contactBinding="contact"}}
{/each}}
{{else}}
<tr>
<td colspan="2">
You have no contacts <br />
:(
<td>
</tr>
{{/if}}
这篇关于Ember.js - 如何使用 Ember.Router 将集合正确绑定到视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
