priyanka.sarkar priyanka.sarkar - 3 months ago 9
HTML Question

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

enter image description here

I am looking for the output should be when button click

enter image description here

Answer

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).

Comments