ember: Array values are not getting reflected while rebinding in EmberJS

vendredi 26 août 2016

Array values are not getting reflected while rebinding in EmberJS

I have an array (['Name1','Name2','Name3']) which I am populating at page Load. Now at button click, I want to assign some other values to that array and populate the same like

App.myArray = ['Name4','Name5','Name6']

But it is not reflected.

Complete code

<!DOCTYPE html>
<html>
   <head>      
      <script src="http://ift.tt/1H1Z8nj"></script>
      <script src="http://ift.tt/13wBVXk"></script>
      <script src="http://ift.tt/1H1Z8Uo"></script>
      <script src="http://ift.tt/1LNmMn9"></script>
      <script src="http://ift.tt/1H1Z8nl"></script>
      <script src="http://ift.tt/1e1uqGJ"></script>
   </head>
   <body>

      <script type="text/x-handlebars">
         
      </script>


      <script type="text/x-handlebars" data-template-name="index">
      <button >Click Here</button>
         <ul>

                           
               <li></li>
            
         </ul>
      </script>

      <script type="text/javascript">
         var App = Ember.Application.create()

         App.myArray = ['Name1','Name2','Name3']         

         App.IndexRoute = Ember.Route.extend({

            actions: {

               ClickFn: function() {

                  App.myArray = ['Name4','Name5','Name6'] 
                  console.log(App.myArray) ;               
               }
             }
         });

      </script>
   </body>
</html>

The current situation is