Liste imbriquée RactiveJS Développer/Réduire les enfants

Question

J'ai joué avec ractive.js et j'essaie d'avoir une idée de ce dont il est capable.J'ai un exemple assez courant, une vue avec une logique d'état interne dont j'aimerais garder une trace propre.Après avoir parcouru les didacticiels, cela semble être quelque chose pour lequel Ractive serait vraiment bon, mais j'ai du mal à comprendre cela.

---

Mise à jour: J'ai révisé mon cas de test ci-dessous en fonction des commentaires de la première réponse que j'ai reçue, pour clarifier le problème exact que j'ai rencontré.Vous pouvez voir l'exemple complet ici : http://jsfiddle.net/e7Mjm/1/

Tout d'abord, j'ai un modèle réactif :

<div id="toc-view"></div>
<script id="ractive-toc" type="text/ractive">
  <ul>
  {{#chapters}}
    <li class="{{type}}">
      <span class="ordinal">{{ordinalize(ordinal)}}</span>
      <a data-id="{{element_id}}">{{title}}</a>
      {{#(sections.length > 0)}}
        <a class="{{open ? 'expand open' : 'expand'}}" on-click="toggleSections"></a>
        {{#open}}
        <ul class="{{open ? 'sections open' : 'sections'}}">
          {{#sections}}{{>section}}{{/sections}}
        </ul>
        {{/open}}
      {{/()}}
    </li>
  {{/chapters}}
  </ul>

  <!-- {{>section}} -->
  <li class="{{type}}">
    <span class="ordinal">{{ordinalize(ordinal)}}</span>
    <a data-id="{{element_id}}">{{title}}</a>
  </li>
  <!-- {{/section}} -->
</script>

J'ai quelques styles CSS simples pour formater ceci :

ul { list-style: none; padding: 0; margin: 0}
ul.sections { padding-left: 20px; }
a.expand { color: red; }
a.expand:before { content: "+"; }
a.expand.open { color: blue; }
a.expand.open:before { content: "-"; }

Et le Javascript suivant pour que tout fonctionne :

data = [
  {
    id: "smith-about",
    title: "About this book",
    type: "front-matter"
  },
  {
    id: "smith-preface",
    title: "Preface",
    type: "front-matter"
  },
  {
    id: "smith-ch01",
    title: "Intro to Biology",
    ordinal: "1",
    type: "chapter",
    sections: [
      {
        id: "smith-ch01-s01",
        title: "What is biology?",
        ordinal: "1.1",
        type: "section"
      },
      {
        id: "smith-ch01-s02",
        title: "What is a biologist?",
        ordinal: "1.2",
        type: "section"
      },
      {
        id: "smith-ch01-s03",
        title: "So you want to be a biologist?",
        ordinal: "1.3",
        type: "section"
      }
    ]
  },
  {
    id: "smith-ch02",
    title: "Applied Biology",
    ordinal: "2",
    type: "chapter",
    sections: [
      {
        id: "smith-ch02-s01",
        title: "Biology in the lab",
        ordinal: "2.1",
        type: "section"
      },
      {
        id: "smith-ch02-s02",
        title: "Biology in the field",
        ordinal: "2.2",
        type: "section"
      },
      {
        id: "smith-ch02-s03",
        title: "Biology in the classroom",
        ordinal: "2.3",
        type: "section"
      }
    ]
  }
]

ractive = new Ractive({
  el: 'toc-view',
  template: '#ractive-toc',
  data: {
    chapters: data,
    ordinalize: function(ordinal) {
      return ordinal ? ordinal + "." : "▸";
    }
  }
});

ractive.on('toggleSections', function(event) {
    event.context.open = !event.context.open;
    this.update();
});

Si vous essayez JS Fiddle, vous verrez que le modèle s'affiche correctement, mais le comportement d'interaction n'est pas tout à fait correct : Si vous cliquez sur a.expand cela ouvre cette section, mais cela change également la classe de tous les autres a.expand icônes, pas seulement celle sur laquelle vous avez cliqué.

C'est le vrai problème que j'ai rencontré, dans la liaison d'événement réactif, il ne semble pas y avoir de très bon moyen pour moi de définir une interaction qui affecte uniquement l'objet de données particulier avec lequel l'utilisateur interagit, à la place l'interaction semble pour affecter toutes les données.

Avez-vous une idée de la façon de définir correctement cela ?

Answer 1

Voici un exemple http://jsfiddle.net/e7Mjm/

J'ai changé pour

{{#open}}{{#sections}}{{>section}}{{/sections}}{{/open}}

Désormais, il s'affichera "à la demande" lorsque vous ouvrirez

et vous pouvez utiliser event.context.Fais juste

event.context.open = !event.context.open;
this.update();