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="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
      <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
      <script src="http://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
      <script src="http://builds.emberjs.com/release/ember.debug.js"></script>
      <script src="http://builds.emberjs.com/beta/ember-data.js"></script>
   </head>
   <body>

      <script type="text/x-handlebars">
         {{outlet}}
      </script>


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

            {{#each value in App.myArray}}               
               <li>{{value}}</li>
            {{/each}}
         </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

I am looking for the output should be when button click

回答1:

Use Ember.set method for changes to reflect it in template. so just replace App.myArray = ['Name4', 'Name5', 'Name6'] with the below

 Ember.set(App,'myArray',['Name4', 'Name5', 'Name6']);

I would say dont use global variable for this kind of stuff. you can introduce it in IndexRoute itself.(i guess you are doing it for testing purpose).

回答2:

App is an Ember object and myArray is its one of the property we can not set value of Ember object's property directly using assignment operator. we have to use setter functions.

you can use Ember.set

1.Ember.set(App,'myArray',['Name4', 'Name5', 'Name6']);

alternatively you can also use set method provided by App object to set its property.

App.set('myArray',['Name4', 'Name5', 'Name6']);

来源：https://stackoverflow.com/questions/39176957/array-values-are-not-getting-reflected-while-rebinding-in-emberjs

标签

javascript

html

ember.js