Ember组件中的共享状态 [英] Shared state in Ember component
问题描述
以下是我使用的代码：
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组件示例< / title>
< / head>
< body>
< script type =text / x-handlebarsid =components / appendable-list>
< h2>可追加列表< / h2>
< ul>
{{#each item in myList}}
< li> {{item}}< / li>
{{/ each}}
< / ul>
{{input type =textvalue = newItem}}
< button {{action'append'}}>追加项< / button>
< / script>
< script type =text / x-handlebars>
{{appendable-list}}
{{appendable-list}}
< / script>
< / body>
< / html>
Javascript：
code> 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）;
}
}
}）;
在这种情况下，列表在两个实例之间共享（即，另一个）
这是JsBin来检查一下： http://jsbin.com/arACoqa/7/edit?html,js,output
如果我做以下，它的作品：
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）;
}
}
}）;
这是JsBin： http://jsbin.com/arACoqa/8/edit?html,js,output
我做错了什么？感谢提前！
声明组件后，每次在模板中使用该组件时，将创建一个新的实例，最重要的是，每次实例化新实例时，也将调用 init 钩子，因此最安全的方式是将 myList 数组将使用组件 init hook来初始化数组，因此请尝试以下操作：
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）;
}
}
}）;
同样重要的是调用 this._super（）; in init ，一切都将按预期工作。
看到这里工作的演示。
希望它有帮助。
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!
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.
这篇关于Ember组件中的共享状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
