Rendering controller actions in Ember 1.13

Question

First off, very new to Ember and especially the changes made to the role of controllers.

In my ember-cli 1.13.8 application, I have a controller action that finds items that were filtered through a user search. The problem is that the result of this search is never rendered on the template.

Controller:

import Ember from 'ember';

export default Ember.Controller.extend({

 actions: {
   query: '',
   searchQuestions: function() {
     var query = this.get('query');
     return this.get('model').filter(function(item) {
       return item.get('title').indexOf(query) !== -1;
     });
   }
 }
});

Template:

{{#each searchQuestions as |item|}}
  <p>{{item}}</p>
{{/each}}

My understanding is that searchQuestions should be available to the template. The action is correctly called and will run through the model that is returned from the route. I've console.logged out the method and it will intermittently print out -1 or 0 so it finds the matches. It just will not update in the template.

I have consulted the guides: http://guides.emberjs.com/v2.0.0/controllers/ as well as tried using {{outlet}} based up this question: Ember route not displaying template content.

If you can even recommend a good article for conceptually understanding the flow of an Ember application I'd be very appreciative.

Edit fixed typo

I modified the controller to add the output as a property of the root object but it still isn't rendering.

import Ember from 'ember';

export default Ember.Controller.extend({
searchQuestions: "",

actions: {
  query: '',
  searchQuestions: function() {
    var query = this.get('query');
    return this.get('model').filter(function(item) {
      console.log(item.get('title').indexOf(query) !== -1)
      return item.get('title').indexOf(query) !== -1;
    });
    this.set('searchQuestions', searchQuestions);
  }
}
});

What is query inside the filter callback? Did you mean filter instead? — elclanrs
You are returning before doing this.set in the last snippet, so that line is never reached. — locks

elclanrs elclanrs · Accepted Answer · 2015-09-28T02:13:31

Try to add the properties the to the root object, as they are not actions. Then you can setup the data on initialization:

export default Ember.Controller.extend({
  query: '',
  setup: Ember.on('init', function() {
    var query = this.get('query');
    var searchQuestions = this.get('model').filter(function(item) {
      return item.get('title').indexOf(filter) !== -1;
    });
    this.set('searchQuestions', searchQuestions);
  })
});

Rendering controller actions in Ember 1.13

1 Answers