RactiveJS Lista Anidada Expandir/Contraer Los Niños

Question

He estado jugando con ractive.js y estoy tratando de conseguir un sentido de lo que es capaz de hacer.Tengo un ejemplo que es bastante común, un punto de vista con algún estado interno de la lógica de la que me gustaría limpiamente seguimiento.Después de ir a través de los tutoriales que esto parece algo Ractive sería realmente muy bueno, pero estoy teniendo un tiempo difícil calcular esto.

---

Actualización: Yo he revisado mi caso de prueba a continuación, basándose en la retroalimentación en la primera respuesta que recibí, para aclarar el problema exacto que he tenido.Puedes ver el ejemplo completo aquí: http://jsfiddle.net/e7Mjm/1/

En primer lugar, tengo un ractive plantilla:

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

Tengo algunos sencillos estilos CSS para dar formato a esta:

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

Y el siguiente código de Javascript para hacer que todo funcione:

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 usted prueba la JS Violín verás la plantilla hace correctamente, pero el comportamiento de la interacción no está muy bien: Si hace clic en a.expand no abrir esa sección, pero también cambia la clase de todos los otros a.expand los iconos, no sólo a la que se hizo clic.

Este es el verdadero problema que he tenido, en el ractive enlace de evento, no parece ser una muy buena manera para mí para definir una interacción que afecta a sólo el particular objeto de datos que el usuario está interactuando con, en lugar de la interacción parece afectar a todos los datos.

Alguna idea de cómo el alcance de este correctamente?

Answer 1

Aquí es un ejemplo http://jsfiddle.net/e7Mjm/

He cambiado a

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

Ahora va a hacer "en demanda" cuando se abre

y usted puede utilizar event.context.Acaba de hacer

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