RactiveJs Elenco nidificato Espansione / Collapse Bambini

Question

Ho giocato con raction.js e sto cercando di avere un senso di ciò di cui è capace. Ho un esempio che è abbastanza comune, una vista con una logica dello stato interna che mi piacerebbe mantenere la traccia. Dopo aver attraversato i tutorial questo sembra che qualcosa di raction sarebbe davvero bravo, ma sto avendo difficoltà a capirlo.

---

.

Aggiornamento: Ho rivisto il mio caso di prova di seguito in base al feedback nella prima risposta che ho ottenuto, per chiarire il problema esatto che ho avuto. Puoi vedere l'esempio completo qui: http://jsfiddle.net/e7mjm/1/ .

In primo luogo, ho un modello raction:

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

.

Ho alcuni semplici stili CSS per formattare questo:

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: "-"; }

.

E il seguente JavaScript per far funzionare tutto:

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

.

Se provi il violino JS, vedrai il modello rendering correttamente ma il comportamento di interazione non è giusto: Se fai clic su a.expand apri quella sezione, ma cambia anche la classe di tutti Le altre icone a.expand, non solo quella che è stata cliccata.

Questo è il vero problema che ho avuto, nell'evento ractive vincolante non sembra essere un ottimo modo per definire un'interazione che colpisce solo il particolare oggetto dati che l'utente sta interagendo, invece L'interazione sembra influenzare tutti i dati.

Qualsiasi intuizione su come spazzarlo correttamente?

Answer 1

Ecco un esempio http://jsfiddle.net/e7mjm/

Ho cambiato in

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

.

Ora renderà "On Demand" quando apri

E puoi usare event.context.Basta fare

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

.