Współdzielony stan w komponencie Ember

Próbowałem zbudować prostą listę z widgetem append jako komponent Emberjs.Współdzielony stan w komponencie Ember

Poniżej znajduje się kod użyłem:

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

W tym przypadku lista jest podzielony między dwóch przypadkach (czyli dołączanie w jednym dołączeniu w drugim)

Oto JsBin, aby to sprawdzić: http://jsbin.com/arACoqa/7/edit?html,js,output

Gdybym wykonać następujące czynności, to działa:

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

Oto JsBin: http://jsbin.com/arACoqa/8/edit?html,js,output

Co robię źle? Z góry dziękuję!

Źródło

2013-09-28 tcbpg

Po zadeklarować składnik, za każdym razem go używać w szablonie nowa instancja będzie utworzony, i co najważniejsze, hak init będzie również wywoływany za każdym razem, gdy zostanie utworzona nowa instancja, dlatego najbezpieczniejszym sposobem na posiadanie różnych macierzy myList byłoby użycie haka komponentu init, aby zainicjować macierz, więc spróbuj wykonać następujące czynności:

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

Ważne również to zadzwonić pod numer this._super(); wewnątrz init i wszystko będzie działać zgodnie z oczekiwaniami.

Zobacz tutaj do pracy demo.

Mam nadzieję, że to pomaga.

Źródło

2013-09-28 19:55:04 intuitivepixel

Świetnie! Myślę, że twoja droga jest o wiele czystsza. Dziękuję Ci! – tcbpg

Ups! Mogłem przysiąc, że tak zrobiłem. Mam nadzieję, że to jest naprawione. – tcbpg

Gdy użyjesz wartości extend(hash), każda wartość występująca w haszdzie zostanie skopiowana do każdej utworzonej instancji. A ponieważ tablica jest obiekt, Twój odniesienia będą takie same w całej tworzonych obiektów:

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 nazywany jest dla każdego nowego widoku stworzonego, a każdy pogląd jest zmierzających instancji. Więc z implementacji zawsze będzie mieć nową instancję Ember.ArrayProxy dla każdego widoku, a następnie podzielił państwo nie istnieje:

didInsertElement: function() { 
    // each call for this method have a diferent instance 
    this.set('myList', Ember.ArrayProxy.create({content: []})); 
}

Źródło

2013-09-28 19:53:11

O, widzę, dziękuję za wyjaśnienie! – tcbpg

Współdzielony stan w komponencie Ember

Odpowiedz

Powiązane problemy