enyo animant un listItem

Question

J'ai un 3 listItems et quand je clique sur l'un d'eux, je veux que la barre verte s'anime de la droite vers la gauche. Mais il ne se comporte pas correctement .. Lorsque vous cliquez sur rien ne se passe, lorsque vous cliquez une seconde fois (facultativement sur une autre ligne) chose devient tout simplement funky. Existe-t-il une solution appropriée pour cela?

http://jsfiddle.net/joopmicroop/6GJs4/

enyo.kind({ 
    name:'main', 
    classes: "enyo-fit", 
    components:[ 
     {name:'list', kind:'enyo.List', count:'3', onSetupItem:'itemSetup', components:[ 
      {name:'listItem', kind:'listItem', ontap:'itemTapped'},  
     ]}, 
    ], 
    itemTapped:function(s,e){ 
     console.log('itemTapped',e.rowIndex); 
     this.$.list.prepareRow(e.rowIndex); 
     this.$.list.performOnRow(e.rowIndex, function(){ this.animate(); }, this.$.listItem); 
     this.$.list.lockRow(); 
     this.$.list.renderRow(e.rowIndex); 
    }, 
    itemSetup:function(s,e){ this.$.listItem.setText('item'+e.index); } 
}); 

enyo.kind({ 
    name:'listItem', 
    classes:'listItem', 
    published:{text:''}, 
    create:function(){ 
     this.inherited(arguments); 
     this.animator = new enyo.Animator({ 
      onStep:enyo.bind(this, function(animObj){ 
       this.$.backBar.applyStyle('width',animObj.value+'%'); 
      }),duration:1000 
     }); 
    }, 
    components:[ 
     {name:'backBar', classes:'animBar'}, 
     {name:'itemContent', content:''}, 
    ], 
    animate:function(){ 
     if(!this.animator.isAnimating()) this.animator.play({startValue:10, endValue:100}); 
    }, 
    textChanged:function(oldVal){ this.$.itemContent.setContent(this.text); }, 
}); 

(new main()).renderInto(document.body); 

Answer 1

Le plus gros problème que vous avez ici est que la ligne cesse d'avoir un nœud après l'appel à performOnRow(). L'appel supplémentaire à lockRow() n'est pas nécessaire car il est verrouillé automatiquement. Si vous voulez que cela fonctionne, vous devrez utiliser une méthode différente après avoir préparé la ligne ou vous devrez mettre en cache le nœud et opérer directement sur le nœud. Il est possible que vous puissiez le faire avec certaines animations CSS, car vous n'auriez besoin que du nœud assez longtemps pour définir la nouvelle valeur une fois et laisser le navigateur faire l'animation.

Oublié pour ajouter: Les noeuds ne sont pas réellement créés jusqu'à ce que le contrôle soit rendu. Si vous souhaitez effectuer des opérations uniquement après l'existence d'un noeud, surchargez rendered().