模板中的Ember.js属性和ArrayController

Question

I've got a setup like this in 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: []
    }), 
})

Basically, known things is the combined arrays of openThings and closedThings. I can't seem to figure out how to iterate over knownThings in the template. Just doing

 {{#each App.ListObject.knownThings }} 

Does not work as the property needs to be accessed like App.ListObject.get('knownThings') but that doesn't work in the template unless I'm doing something terribly wrong. Iterating over the other attributes in the template does work (open and closed things)

So, how would you iterate over knownThings in the template?

Answer 1

Slight Modifications needed...

Firstly,

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')

Coming to Handlebars iterate using

//you forgot content property, and in handlebars you don;t need to use get, dot operator is enough
{{#each App.List.knownThings}}

Let me know if this works...

Working Fiddle ...

Answer 2

Unless I didn't understand what you're saying, I think you should have ListObject extending Em.ArrayController instead of Em.Object . Also, if your property depends on content , it should be .property('content.@each') . If you're using the router, your template should look like {{#each thing in controller.knownThings}} and you use {{thin.something}} , if not using router, then {{#each item in App.listObject.knownThings}} . Also, openThings and closedThings don't seem to be correct and the way you're accessing them is wrong too.

I didn't write a fiddle for this specific case cause I don't really know what you're trying to do, but take a look at this fiddle , specifically at App.ResourcesController and the template 'resources-view':

Controller:

// ...
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') 
);
// ...

Template:

<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>