Shared state in Ember component
Question
I was trying to build a simple list with append widget as an Emberjs component.
The following is the code I used:
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0/ember.min.js"></script>
<meta charset=utf-8 />
<title>Ember Component example</title>
</head>
<body>
<script type="text/x-handlebars" id="components/appendable-list">
<h2> An appendable list </h2>
<ul>
{{#each item in myList}}
<li> {{item}} </li>
{{/each}}
</ul>
{{input type="text" value=newItem}}
<button {{action 'append'}}> Append Item </button>
</script>
<script type="text/x-handlebars">
{{appendable-list}}
{{appendable-list}}
</script>
</body>
</html>
Javascript:
App = Ember.Application.create();
App.AppendableListComponent = Ember.Component.extend({
theList: Ember.ArrayProxy.create({ content: [] }),
actions: {
appendItem: function(){
var newItem = this.get('newItem');
this.get('theList').pushObject(newItem);
}
}
});
In that case, the list is shared between the two instances (that is, appending in one appends in the other)
Here is the JsBin to check it out: http://jsbin.com/arACoqa/7/edit?html,js,output
If I do the following, it works:
window.App = Ember.Application.create();
App.AppendableListComponent = Ember.Component.extend({
didInsertElement: function(){
this.set('myList', Ember.ArrayProxy.create({content: []}));
},
actions: {
append: function(){
var newItem = this.get('newItem');
this.get('myList').pushObject(newItem);
}
}
});
Here is the JsBin: http://jsbin.com/arACoqa/8/edit?html,js,output
What am I doing wrong? Thanks in advance!
2 answers
solution1
7 ACCPTED 2013-09-28 19:55:04
After you declare the component, each time you use it in your template a new instance will be created, and most importantly the init hook will also be called every time a new instance is instantiated, therefore the most secure way to have different myList arrays would be to use the component init hook, to initialize the array, so try the following:
App.AppendableListComponent = Ember.Component.extend({
myList: null,
init: function(){
this._super();
this.set('myList', Ember.ArrayProxy.create({content: []}));
},
actions: {
append: function(){
var newItem = this.get('newItem');
this.get('myList').pushObject(newItem);
}
}
});
Also important is to call this._super(); inside init and everything will work as expected.
See here for a working demo .
Hope it helps.
solution2
4 2013-09-28 19:53:11
When you use extend(hash) any value present in the hash, will be copied to any created instance. And because array is a object, your reference will be the same across the created objects:
App.MyObject = Ember.Object.extend({ text: [] });
obj1 = App.MyObject.create();
obj2 = App.MyObject.create();
obj1.get('text') === obj2.get('text') // true
obj1.get('text').pushObject('lorem');
obj1.get('text'); // ["lorem"]
obj2.get('text').pushObject('ipsum');
obj2.get('text'); // ["lorem", "ipsum"]
The didInsertElement is called for each new view created, and each view is a diferent instance. So with your implementation you always will have a new Ember.ArrayProxy instance for each view, then no shared state exist:
didInsertElement: function() {
// each call for this method have a diferent instance
this.set('myList', Ember.ArrayProxy.create({content: []}));
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.