Question

我正在制作我的第一个Ember应用程序。它是应用程序的变体。您键入一个值，点击提交按钮，页面应该使用双向数据绑定添加每个新项目。

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

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

我想创建一个自定义视图（在这个例子中是App.ReRenderUserList）并添加.observe就像他们谈论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方法。这将更新绑定..

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

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

1 个答案: