Общее состояние в компоненте Ember

Я пытался создать простой список с добавлением виджета в качестве компонента Emberjs.

Ниже приведен код, который я использовал:

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);
        }
    }
});

В этом случае список распределяется между двумя экземплярами (то есть добавление в одном добавляется в другом)

Вот JsBin, чтобы проверить это: http://jsbin.com /arACoqa /7 /редактировать? HTML, JS, выход

Если я сделаю следующее, это сработает:

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 /редактировать? HTML, JS, выход

Что я делаю не так? Заранее спасибо!

5 голосов | спросил tcbpg 28 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowSat, 28 Sep 2013 23:26:28 +0400 2013, 23:26:28

2 ответа


0

После того, как вы объявите компонент, каждый раз, когда вы используете его в своем шаблоне, будет создаваться новый экземпляр, и, что наиболее важно, init hook также будет вызываться каждый раз, когда создается новый экземпляр, поэтому наиболее безопасный способ иметь разные массивы myList состоит в использовании компонента Хук init для инициализации массива, поэтому попробуйте следующее:

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(); внутри init и все будет работать как положено.

Смотрите здесь рабочую демонстрационную версию .

Надеюсь, это поможет.

ответил intuitivepixel 28 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowSat, 28 Sep 2013 23:55:04 +0400 2013, 23:55:04
0

При использовании extend(hash) любое значение, присутствующее в хэше, будет скопировано в любой созданный экземпляр. И поскольку массив является объектом, ваша ссылка будет одинаковой для всех созданных объектов:

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"]

didInsertElement вызывается для каждого нового созданного представления, и каждое представление является отдельным экземпляром. Таким образом, в вашей реализации у вас всегда будет новый экземпляр Ember.ArrayProxy для каждого представления, тогда не будет общего состояния:

didInsertElement: function() {
    // each call for this method have a diferent instance
    this.set('myList', Ember.ArrayProxy.create({content: []}));
}
ответил Marcio Junior 28 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowSat, 28 Sep 2013 23:53:11 +0400 2013, 23:53:11

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132