Template is not rerendering loop about changed controller variable

1

Given 2 array items when I add new input then I want to see 3 array items but still only see 2 array items.

This is my current code …

Route

    model: (params) ->
      @controllerFor('pages').set 'myArray', []

Template

  <ul>
  {{#each myArray as |item itemIndex|}}
    <li>{{item}}</li>
  {{/each}}
</ul>
<input id="my_input"/><button {{action 'addInput'}}/>

Controller

    addInput: ->
      array = @get('myArray')
      array.push $('#my_input').val()
      @set 'myArray', array

How can I get the template to rerender / auto-update the loop about changed controller variable “myArray”?

I’m using Ember 1.13.8.

2

I have to use this code:

array.pushObject $('#my_input').val()

This told me the Ember.JS guide here: Displaying a List of Items - Templates - Ember Guides