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

Question

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

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

因此，将新对象添加到数组，然后循环遍历每个项目并将其打印到页面上工作正常。唯一的问题是页面永远不会更新通过输入字段添加的新项目。

我想创建一个自定义 View (在本例中为 App.ReRenderUserList)并添加 .observes，就像他们谈论 in a previous question 一样可能是答案，但这似乎不起作用。

这是我的代码。让我知道是否还有其他需要添加的内容。感谢您的帮助。

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

Answer 1

您应该使用 pushObject 方法而不是 push 方法。这将更新绑定(bind)..

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.pushObject({
                name: value // this is just echoing and not adding my new items from the form.
            }); // adds it to JSON Object
            console.log(userLibrary);
        }
    }
});