[英]Ember.js property and ArrayController in template
我在Ember中有這樣的設置:
App.ListObject = Ember.Object.create({
knownThings: function() {
var ot = this.openThings.get('content');
var ct = this.closedThings.get('content');
var kt = ot.concat(ct);
var known = Ember.ArrayController.create({content: kt});
return known;
}.property(),
openThings: Ember.ArrayController.create({
content: []
}),
closedThings: Ember.ArrayController.create({
content: []
}),
})
基本上,已知的東西是openThings和closedThings的組合數組。
我似乎無法弄清楚如何遍歷模板中的knownThings。
只是做
{{#each App.ListObject.knownThings }}
不能正常工作,因為該屬性需要像App.ListObject.get('knownThings')
一樣進行訪問,但是除非我做錯了什么,否則它在模板中不起作用。 遍歷模板中的其他屬性確實起作用(打開和關閉的東西)
那么,您將如何遍歷模板中的knownThings?
需要稍作修改...
首先,
knownThings: function() {
//use get to retrieve properties in ember, Always !
var ot = this.get('openThings').get('content');
//var ot = this.get('openThings.content') if you are using latest ember
var ct = this.get('closedThings').get('content');
//var ot = this.get('closedThings.content') if you are using latest ember
var kt = ot.concat(ct);
var known = Ember.ArrayController.create({content: kt});
return known;
//Add dependencies to keep your knownThings in sync with openThings & closedThings if at all they change in future
}.property('openThings', 'closedThings')
來到車把使用
//you forgot content property, and in handlebars you don;t need to use get, dot operator is enough
{{#each App.List.knownThings}}
讓我知道這個是否奏效...
更新工作提琴 ...
除非我不明白您在說什么,否則我認為您應該讓ListObject
擴展Em.ArrayController
而不是Em.Object
。 另外,如果您的財產取決於content
,則應為.property('content.@each')
。 如果您使用的是路由器,則模板應類似於{{#each thing in controller.knownThings}}
並且您使用{{thin.something}}
,如果未使用路由器,則{{#each item in App.listObject.knownThings}}
。 另外, openThings
和closedThings
似乎也不正確,並且您訪問它們的方式也是錯誤的。
我沒有為這種特殊情況寫小提琴,因為我真的不知道您要做什么,但是請看一下這個小提琴 ,特別是App.ResourcesController
和模板“ resources-view”:
控制器:
// ...
App.ResourcesController = Em.ArrayController.extend({
content: [],
categories: ['All', 'Handlebars', 'Ember', 'Ember Data', 'Bootstrap', 'Other'],
categorySelected: 'All',
filtered: function() {
if(this.get('categorySelected') == "All") {
return this.get('content');
} else {
return this.get("content")
.filterProperty(
"category",
this.get('categorySelected')
);
}
}.property('content.@each', 'categorySelected'),
filteredCount: function() {
return this.get('filtered').length;
}.property('content.@each', 'categorySelected'),
hasItems: function() {
return this.get('filtered').length > 0;
}.property('filteredCount')
);
// ...
模板:
<script type="text/x-handlebars" data-template-name="resources-view">
<h1>Ember Resources</h1>
{{#view Bootstrap.Well}}
The following is a list of links to Articles, Blogs, Examples and other types of resources about Ember.js and its eco-system.
{{/view }}
{{view Bootstrap.Pills contentBinding="controller.controllers.resourcesController.categories" selectionBinding="controller.controllers.resourcesController.categorySelected"}}
<i>{{controller.filteredCount}} Item(s) Found</i>
{{#if controller.hasItems}}
<ul>
{{#each resource in controller.filtered}}
<li>
<a {{bindAttr href="resource.url"
target="resource.target"
title="resource.description"}}>
{{resource.htmlText}}
</a>
</li>
{{/each}}
</ul>
{{else}}
{{#view Bootstrap.AlertMessage type="warning"}}
Couldn't find items for {{controller.categorySelected}}
{{/view}}
{{/if}}
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.