قائمة RactiveJS المتداخلة قم بتوسيع/طي الأطفال

Question

لقد كنت ألعب مع ractive.js وأحاول التعرف على ما هو قادر عليه.لدي مثال شائع إلى حد ما، وهو عرض يحتوي على بعض منطق الحالة الداخلية الذي أرغب في تتبعه بشكل واضح.بعد الاطلاع على البرامج التعليمية، يبدو أن هذا شيئًا سيكون Ractive جيدًا فيه حقًا، لكنني أجد صعوبة في اكتشاف ذلك.

---

تحديث: لقد قمت بمراجعة حالة الاختبار الخاصة بي أدناه بناءً على التعليقات الواردة في الإجابة الأولى التي حصلت عليها، لتوضيح المشكلة التي كنت أواجهها بالضبط.يمكنك رؤية المثال الكامل هنا: http://jsfiddle.net/e7Mjm/1/

أولاً، لدي قالب نشط:

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

لدي بعض أنماط CSS البسيطة لتنسيق هذا:

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

وجافا سكريبت التالي لجعل كل شيء يعمل:

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

إذا قمت بتجربة JS Fiddle، فسترى أن القالب يتم عرضه بشكل صحيح ولكن سلوك التفاعل ليس صحيحًا تمامًا: إذا قمت بالنقر فوق a.expand إنه يفتح هذا القسم، ولكنه يغير أيضًا فئة جميع الأقسام الأخرى a.expand الرموز، وليس فقط تلك التي تم النقر عليها.

هذه هي المشكلة الحقيقية التي أواجهها، في ربط الحدث النشط لا يبدو أن هناك طريقة جيدة جدًا بالنسبة لي لتحديد التفاعل الذي يؤثر فقط على كائن البيانات المعين الذي يتفاعل معه المستخدم، بدلاً من ذلك يبدو التفاعل للتأثير على كافة البيانات.

هل هناك أي فكرة عن كيفية تحديد نطاق هذا بشكل صحيح؟

Answer 1

هنا مثال http://jsfiddle.net/e7Mjm/

لقد تغيرت إلى

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

الآن سيتم عرضه "عند الطلب" عند الفتح

ويمكنك استخدامها event.context.فقط افعل

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