CODEWITHSUNDEEP
javascriptember.js
Will Nathan
Will Nathan

Reputation: 625

Ember.js passing parameters from views to controller functions

I have an Ember.js app as follows (borrowed from this article on andyMatthews.net):

View:

<script type="text/x-handlebars" >
    {{view App.UserTextField}}
    {{#each App.recentUsersArray.reverse tagName="ul"}}
        <li>{{this}}</li>
    {{/each}}
</script>​

App:

App = Ember.Application.create();

App.UserTextField = Ember.TextField.extend({
    insertNewline: function(){
        var term = this.get('value');
        App.recentUsersArray.pushObject(term);
    }
});

App.recentUsersArray = Em.ArrayController.create({
    content: ['noelle', 'evan', 'mason'],
    reverse: function(){
        return this.get('content').toArray().reverse();
    }.property('content.@each').cacheable(),
});​

But I'd like to pass a parameter to App.recentUsersArray.reverse from the view (for example, to set the number of reversed items to be returned). I run into a problem because while you can accept the parameter on the controller function, it doesn't seem like you can pass it from the view. I was imagining something like this if you wanted to pass the parameter 3 to the reverse function on the controller:

{{#each App.recentUsersArray.reverse(3) tagName="ul"}}
   <li>{{this}}</li>
{{/each}}

but it throws an error (Uncaught Error: Parse error)...thoughts? The ultimate goal would be to create three <ul>'s, each with a different number of elements without creating a different function for each length (i.e., App.recentUsersArray.reverseThree(), App.recentUsersArray.reverseFive(), etc. ). I also don't want to make three different controllers, because each of the <ul>'s should be using the same data source, just sliced up differently.

Upvotes: 2

Views: 2812

Answers (1)

Dumb E.
Dumb E.

Reputation: 46

Yes, Ember can come across as an odd paradigm. Maybe try: 

App.recentUsersArray = Em.ArrayController.create({
  recentCount: 3
  content: ['noelle', 'evan', 'mason'],
  reverse: function(){
      var max = this.get('recentCount');
      return this.get('content').reverse().slice(0, max)
  }.property('content.@each', 'recentCount').cacheable(),
});​

//some event handler
App.recentUsersArray.set('recentCount', count)

I don't think toArray() is necessary, plus the docs say it does not guarantee the order of elements returned: http://docs.emberjs.com/#doc=Ember.Enumerable&method=.toArray&src=false

Upvotes: 2

Related Questions