javascript - Shared state in Ember component

I was trying to build a simple list with append widget as an Emberjs ponent.

The following is the code I used:

HTML:

<!DOCTYPE html>
<html>
<head>
<script src=".min.js"></script>
<script src=".js/1.0.0/handlebars.js"></script>
<script src=".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="ponents/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: ,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: ,js,output

What am I doing wrong? Thanks in advance!

I was trying to build a simple list with append widget as an Emberjs ponent.

The following is the code I used:

HTML:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis./ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare./ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script src="http://cdnjs.cloudflare./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="ponents/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./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./arACoqa/8/edit?html,js,output

What am I doing wrong? Thanks in advance!

Share Improve this question edited Sep 28, 2013 at 19:40 Marcio Junior 19.1k4 gold badges46 silver badges47 bronze badges asked Sep 28, 2013 at 19:26 user1415757

Add a ment |

2 Answers 2

Sorted by: Reset to default 7

After you declare the ponent, 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 ponent 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.

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: []}));
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Shared state in Ember component - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)