Application de compteur avec stockage local

Question

Je travaille sur une application de compteur qui utilise moustache.js pour créer plusieurs compteurs et mémoriser vos données en utilisant le stockage local. Vous cliquez simplement sur le bouton «+» pour ajouter un nouveau compteur, et appuyez sur le bouton Ajouter pour augmenter le compteur.

Je rencontre plusieurs problèmes: - Lorsque vous ajoutez et que vous avez plusieurs compteurs, ils augmentent tous. - Lorsque je clique sur le bouton de fermeture, les compteurs augmentent également.

Est-il également possible d'entrer un titre via le champ de saisie et de le mémoriser localement?

Toute aide serait grandement appréciée. Si vous avez des solutions, pouvez-vous expliquer?

Voir le violon ici: http://jsfiddle.net/techydude/MSnuE/

Javascript:

$(function() { 
    var doc = $(document), 
     CounterContainer = $("#CounterContainer"), 
     //Container for all Counters 
     container = $(".counter"), 
     //Individual Conter Counters 
     counter = $(".valueCount"), 
     addBtn = $(".add"), 
     valueCount = $(".valueCount").html(), 
     addCounter = $("#create-counter"), 
     counterTemplate = Mustache.compile($("#counter-template").html()); 

    if (localStorage.counterSave) { 
    CounterContainer.html(localStorage.counterSave); 
    } 

    function save() { 
    localStorage.counterSave = CounterContainer.html(); 
    } 


    addCounter.submit(function(e) { 

    // prevent page from refresing 
    e.preventDefault(); 
    var value = 5; 
    makeCounter(value); 
    save(); 
    }); 

    function makeCounter(value) { 
    $(counterTemplate({ 
     txt: value 
    })).appendTo(CounterContainer); 
    } 



    CounterContainer.on("click", addBtn, function(valueCount) { 
    var EachContainer = $("div.valueCount"), 
     EachContainerValue = $("div.valueCount").html(); 

    EachContainer.html(++EachContainerValue); 

    console.log("test"); 

    save(); 
    }); 

    doc.on("click", "button.removeCounter", function() { 
    $(this).parent().remove(); 
    save(); 
    }); 

});​ 

Answer 1

permet d'essayer de briser ce en sections. Tout d'abord vous augmentez la valeur de tous les compteurs, car le sélecteur utilisé pour obtenir le compteur que vous recherchez affectera tous les compteurs, le comportement est correct. Laissez-moi vous expliquer:

Lorsque vous faites ceci: var EachContainer = $("div.valueCount"), l'objet retourne jQuery est tous les éléments correspondant à ce sélecteur donc s'il y a plus d'un comptoir, tous seront touchés. Pour résoudre ce problème, vous pouvez utiliser le mot-clé this pour remonter l'arborescence DOM à partir du bouton sur lequel vous avez cliqué, et sélectionner le seul frère avec ce sélecteur.

$(".add").live("click",function(){ 
     var counter = $(this).siblings(".valueCount"); 
     counter.html(parseInt(counter.text())+1); 
     save(); 
    }); 

Cette approche résout le problème que vous rencontrez probablement en utilisant .click depuis que l'on ne touche que les éléments créés à ce moment donné et non pas ceux à venir. Avec ce petit changement, vous avez maintenant la possibilité de créer plusieurs compteurs et de sauvegarder leurs valeurs. Mais pas les titres, encore

La première partie est d'invoquer la méthode save sur chaque modification du titre, bien que cela puisse se faire sur d'autres événements tels que l'événement onChange, mais puisque cela pourrait potentiellement conduire à perdre un titre sur certaines circonstances et la longueur du titre devrait être relativement faible, vous devriez être très bien avec juste faire:

$(".title").live("keyup",function(){ 
    save(); 
}); 

la deuxième partie est assez simple et provient de l'incapacité de certains navigateurs pour modifier le DOM quand nous dynamiquement modifier un attribut de formulaire, ce qui signifie que bien que la valeur de votre entrée change, le DOM ne le lire et, par conséquent, lorsque vous enregistrez le contenu de la div contenant tous vos compteurs, vous n'enregistrez pas l'attribut value. Pour résoudre ce problème, vous vous retrouvez avec:

$(".title").live("keyup",function(){ 
    $(this).attr('value',this.value); 
    save(); 
}); 

Notez que je ne vais pas modifier l'un de l'autre code ou le balisage, et je l'ai également mon code dans une fourchette de votre violon et placé au le haut de la section Javascript pour une localisation plus facile. Voici le working fiddle, avec la possibilité d'ajouter de nouveaux compteurs, de changer les valeurs de ces compteurs et de leurs titres et bien sûr l'option de les supprimer (qui fonctionnait déjà).

Profitez-en!

---

Sources:

• Firefox not updating DOM
• The updated fiddle
• jQuery live method