Update page with items added via text field in Ember

I'm working on my first Ember app. It's a variation of a to do app. You type in a value, hit submission button and the page should update with each new item added using two-way data binding.

Every new item gets added to an array of object literals.

So adding new objects to the array and then looping through each item and printing it to the page is working just fine. Only problem is the page never updates with new items added via the input field.

I thought creating a custom view (App.ReRenderUserList in this instance) and adding .observes like they talk about in a previous question might be the answer, but that didn't seem to work.

Here's my code. Let me know if there's anything else I need to add. Thanks for your help.

index.html

<script type="text/x-handlebars" data-template-name="add">
        {{partial "_masthead"}}

        <section>
            <div class="row">
                <div class="column small-12 medium-9 medium-centered">
                    <form {{action "addToList" on="submit"}}>
                        <div class="row">
                            <div class="column small-8 medium-9 no-padding-right">
                                {{input type="text" value=itemName}}
                            </div>
                            <div class="column small-4 medium-3 no-padding-left">
                                {{input type="submit" value="Add +"}}
                                {{!-- clicking on this should add it to the page and let you keep writing --}}
                            </div>
                        </div>
                        <!-- /.row -->
                    </form>
                </div>
                <!-- /.column -->
            </div>
            <!-- /.row -->
        </section>

        <section>
            <div class="row">
                <div class="column small-12 medium-9 medium-centered">
                    <div class="list">
                            {{#each userItems}}
                                <div class="column small-16">
                                    {{#view App.ReRenderUserList}}
                                        <div class="item">{{name}}</div>
                                    {{/view}}
                                </div>
                                <!-- /.column -->
                            {{/each}}
                        </div>
                        <!-- /.list -->
                </div>
                <!-- /.column -->
            </div>
            <!-- /.row -->
        </section>
</script>
<!-- END add items template -->

pertinent app.js code:

var itemLibrary = [
    {
        'name' : 'bread'
    },
    {
        'name' : 'milk'
    },
    {
        'name' : 'eggs'
    },
    {
        'name' : 'cereal'
    }
];

var userLibrary = [];

App.AddRoute = Ember.Route.extend({
    model: function() {
      return Ember.RSVP.hash({
          presetItems: itemLibrary,
          userItems: userLibrary
      });
    }
});

App.AddController = Ember.ObjectController.extend({
    actions: {
        // add the clicked item to userLibrary JSON object
        addToList: function(){
            var value = this.get('itemName');   // gets text input value
            userLibrary.push({
                name: value // this is just echoing and not adding my new items from the form.
            }); // adds it to JSON Object
            console.log(userLibrary);
        }
    }
});

App.ReRenderUserList = Ember.View.extend({
    submit: function(){
        console.log('rerendered!');
    }
});