Обновить страницу с элементами, добавленными в текстовое поле в Ember

Question

Я работаю над своим первым приложением Ember. Это вариант приложения. Вы вводите значение, нажмите кнопку отправки и страница должна обновляться с каждым новым добавленным добавлением с использованием двусторонней привязки данных.

Каждый новый элемент добавляется к массиву литералов объектов.

Таким образом, добавление новых объектов в массив, а затем цикл через каждый элемент и печать его на странице работает нормально. Только проблема заключается в том, что страница никогда не обновляется новыми элементами, добавленными через поле ввода.

Я думал о создании пользовательского представления (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 вместо метода толчка. Это обновит привязки ..

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