使用通过Ember中的文本字段添加的项目更新页面

我正在开发我的第一个Ember应用程序。这是一个待办事项应用程序的变体。您键入一个值，点击提交按钮，页面应该会随着使用双向数据绑定添加的每个新项目而更新。

每个新项都会添加到一个对象文字数组中。

因此，将新对象添加到数组中，然后循环浏览每个项目并将其打印到页面上，效果很好。唯一的问题是页面永远不会更新通过输入字段添加的新项目。

我认为创建一个自定义视图（在本例中为App.ReRenderUserList）并添加像他们在上一个问题中所说的那样的.observes可能是答案，但这似乎不起作用。

这是我的密码。如果还有什么需要补充的，请告诉我。谢谢你的帮助。

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

相关的app.js代码：

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!');
    }
});